{"id":23039328,"url":"https://github.com/javadbat/jb-date-input-react","last_synced_at":"2025-08-14T19:32:32.695Z","repository":{"id":57279705,"uuid":"445882003","full_name":"javadbat/jb-date-input-react","owner":"javadbat","description":"React Date Picker Component that support both jalali (shamcy) \u0026 Gregorian  date ","archived":false,"fork":false,"pushed_at":"2024-11-24T09:48:25.000Z","size":481,"stargazers_count":23,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-24T10:28:04.301Z","etag":null,"topics":["calendar","jalali","jalali-calendar","jalali-date","jalali-date-picker","react","react-component","reactjs","shamsi","shamsi-calendar"],"latest_commit_sha":null,"homepage":"https://javadbat.github.io/jb-date-input-react/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/javadbat.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-01-08T17:17:51.000Z","updated_at":"2024-11-24T09:48:29.000Z","dependencies_parsed_at":"2024-11-14T18:17:14.300Z","dependency_job_id":null,"html_url":"https://github.com/javadbat/jb-date-input-react","commit_stats":{"total_commits":71,"total_committers":1,"mean_commits":71.0,"dds":0.0,"last_synced_commit":"e795f060ba9917cb7d839ff8ab0b47537d0c78cb"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javadbat%2Fjb-date-input-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javadbat%2Fjb-date-input-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javadbat%2Fjb-date-input-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javadbat%2Fjb-date-input-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/javadbat","download_url":"https://codeload.github.com/javadbat/jb-date-input-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229859836,"owners_count":18135519,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["calendar","jalali","jalali-calendar","jalali-date","jalali-date-picker","react","react-component","reactjs","shamsi","shamsi-calendar"],"created_at":"2024-12-15T18:30:17.393Z","updated_at":"2025-08-14T19:32:32.689Z","avatar_url":"https://github.com/javadbat.png","language":"TypeScript","readme":"# jb-date-input-react\n\n[![GitHub license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://raw.githubusercontent.com/javadbat/jb-date-input-react/master/LICENSE)\n[![NPM Downloads](https://img.shields.io/npm/dw/jb-date-input-react)](https://www.npmjs.com/package/jb-date-input-react)\n\n\u003e [!WARNING]  \n\u003e this package is deprecated and moved to [jb-date-input/react](https://github.com/javadbat/jb-date-input/tree/main/react)\n\nreact component date input (picker) to get date (jalali \u0026 gregorian) from user.\nthis component is a simple react component that use [jb-date-input](https://github.com/javadbat/jb-date-input) inside and its just a simple wrapper for it so i suggest you to read jb-date-input document too for more updated document.    \n\n- support jalali date as well as gregorian date\n\n- support keyboard arrow key and fast date input with keyboard\n\n- customizable style with css variables\n\n- can set min and max date value\n\n- web component so it can be used in every framework and even purejs project\n\n- responsive and mobile friendly (support swipe in touch devices and handle virtual keyboard)\n\n- support typescript\n\n- good typing experience for desktop user\n\n- it use your page font by default.\n\n- customizable month names so you can change it for afghan or any other locals\n\n- have 3 value type so you can get inputted value in gregorian, jalali or timestamp base on your project need\n\n- customizable value format so you can get your value in standard iso format or custom format like `1400/12/08` or `1400_12_08`\n\n- support `esm` import build for modern `ECMA Script` nodejs app. \n\nDemo \u0026 Sample    \nin github: \u003chttps://javadbat.github.io/jb-date-input-react/\u003e    \nin codepen: \u003chttps://codepen.io/javadbat/pen/qBRyYKY\u003e    \nin codeSandBox: [codeSandbox preview](https://3f63dj.csb.app/samples/jb-date-input) for just see the demo and [codeSandbox editor](https://codesandbox.io/p/sandbox/jb-design-system-3f63dj?file=%2Fsrc%2Fsamples%2FJBDateInput.tsx) if you want to see and play with code\n\n## instructions\n\n### getting started\n\n#### using npm\n\n1- install package:\n\n```command\nnpm i jb-date-input-react\n```\n\n2- import package in your jsx file:\n\n```js\nimport {JBDateInput} from 'jb-date-input-react';\n```\n\n3- use it in your jsx file like any other tag:\n\n```jsx\n\u003cJBDateInput label=\"date label\"\u003e\u003c/JBDateInput\u003e\n```\n\n## format\n\ndefault format of date input is 'YYYY-MM-DDTHH:mm:ss.SSS[Z]' that compatible and exact format of `new Date().toISOString()`\nyou can change it however you need and `[Z]` mean the exact Z character that used in ISO standard format `YYYY-MM-DDTHH:mm:ss.SSSZ[Z]` =\u003e `2012-06-21T00:00:00.000+3:30Z`\nyou can change format by format attribute:\n\n```jsx\n\n\u003cJBDateInput label=\"تاریخ\" format=\"YYYY/MM/DD\" value=\"2020/08/14\"\u003e\u003c/JBDateInput\u003e\n\n```\n\n## valueType\n\nwe have 3 value type:\n\n```jsx\n    \u003cJBDateInput value=\"2020-08-01T14:05:39.530Z\" valueType=\"GREGORIAN\"/\u003e\n    \u003cJBDateInput value=\"1596291030322\" valueType=\"TIME_STAMP\"/\u003e\n    \u003cJBDateInput value=\"1399-05-01T12:05:39.530Z\" valueType=\"JALALI\"/\u003e\n```\n\n## min and max date limit\n\nyou can set minimum date and maximum date range for your app in string or Date type\n\n```jsx\n \u003cJBDateInput label=\"تاریخ شروع \" value=\"2020-08-10T08:51:23.176Z\" min=\"2020-08-05T08:51:23.176Z\" max=\"2020-08-15T08:51:23.176Z\"\u003e\n \u003c/JBDateInput\u003e\n```\n## placeholder\n\nyou can set placeholder to show it to user when input is empty. to doing so just set `placeholder` attribute in JSX DOM: \n\n```jsx\n \u003cJBDateInput placeholder=\"Enter Date Here\"\u003e\n \u003c/JBDateInput\u003e\n```\n## custom validation\n\nbeside of min and max you can also set your own custom validation like any other jb react components family to achive this you must create a array of validations and pass it to validationList props.\n\n```js\nconst validationList = [\n        {\n            validator:/^13.*$/g,\n            message:'تاریخ باید تنها در قرن 13 شمسی باشد'\n        },\n        {\n            validator:({text, inputObject, valueObject, valueText})=\u003e{\n                //you can use raw imputed text or formatted text in expected value in arguments\n                //you have access to both jalali and gregorian date object here in valueObject\n                //inputObject is a object contain imputed day \u0026 month \u0026 year unprocessed base on format so it have value before date imputed completely\n                // remember valueObject and valueText are both empty and null when date is incomplete\n                //if you want to validate incomplete date you can use inputText\n                return valueObject.jalali.day == 15;\n            },\n            message:'باید تاریخ حتما  15 ماه انتخاب شود'\n        }\n];\n    \n```\n```jsx\n    \u003cJBDateInput validationList={validationList}\u003e\u003c/JBDateInput\u003e\n```\n\n\nremember your min and max date must be in the same format and valueType of your value.\nto trigger validation and check is the element has a valid value:\n\n```jsx\n// if in triggerInputValidation(showError) show error was false, in case of error,component wont show the error itself and the  function will return if the data is valid or not\nconst MyForm = (props) =\u003e {\n\n    const dateElementRef = useRef(null);\n    const [validationResult, setValidationResult] = useState();\n    return(\n        \u003cdiv\u003e\n            \u003cJBDateInput ref={dateElementRef}\u003e\u003c/JBDateInput\u003e\n            \u003cbutton onClick={()=\u003e{setValidationResult(dateElementRef.current.triggerInputValidation(true))}}\u003echeck and show validation error\u003c/button\u003e\n            \u003cbutton onClick={()=\u003e{setValidationResult(dateElementRef.current.triggerInputValidation(false))}}\u003echeck validation\u003c/button\u003e\n        \u003c/div\u003e\n        )\n    };\n\n```\n\n## events\n- onSelect\n```js \n    \u003cJBDateInput onSelect={(event) =\u003e {console.log(event.target.value)}}\u003e\u003c/JBDateInput\u003e\n```\n- onChange\n```js \n    \u003cJBDateInput onChange={(event) =\u003e {console.log(event.target.value)}}\u003e\u003c/JBDateInput\u003e\n```\n\n- onKeyup\n```js \n    \u003cJBDateInput onKeyup={(event) =\u003e {console.log(event.target.value)}}\u003e\u003c/JBDateInput\u003e\n```\n\n## date input type\n\njb-calendar support both jalali and gregorian(miladi) calendar input type. like value-type that let you determine how you want to provide/expect data to/from JBDateInput you can specify how user must fill the date input.\nto achive this you have to set `inputType` props or set `inputType` object to component  directly using your elements ref.\nto set it as props you can set value like this:\n\n```jsx\n\u003cJBDateInput inputType=\"GREGORIAN\"\u003e\u003c/JBDateInput\u003e\n\u003cJBDateInput inputType=\"JALALI\"\u003e\u003c/JBDateInput\u003e\n```\nand for doing it with direct DOM assignment you can use following js code:\n\n```js\n//to show gregorian calendar\nconst elementRef =  React.createRef();\n//set ref to element ...\nelementRef.current.inputType = \"GREGORIAN\" \nelementRef.current.inputType = \"JALALI\"\n```\n## set default date for calendar when opened\n\nwhen date input value is empty we show today year and month in opened calendar by default but you can change it to another date. for example you want user fill they birthdate you can set it to 20 years ago so user can pick his/her birthday easier and faster. to doing so all you have to do is to use `calendarDefaultDateView`function like this:\n\n```jsx\n\u003cJBDateInput inputType=\"JALALI\" calendarDefaultDateView={{year:1350, month:3}}\u003e\u003c/JBDateInput\u003e\n```\n## show persian number\nif you want to show persian number instead of English number char you just have to set `showPersianNumber` prop like this:\n```jsx\n\u003cJBDateInput showPersianNumber={true}\u003e\u003c/JBDateInput\u003e\n```\n## customize calendar button trigger\n\nyou can change calendar icon base on your own need to doing so you just have to put your custom html inside the react component with `slot=\"calendar-trigger-icon\"` like below:\n\n```jsx\n\u003cJBDateInput \u003e\n        \u003cdiv slot=\"calendar-trigger-icon\"\u003e\n            \u003csvg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 610.398 610.398\"\u003e\n                \u003cg\u003e\n                    \u003cg\u003e\n                        \u003cpath d=\"M159.567,0h-15.329c-1.956,0-3.811,0.411-5.608,0.995c-8.979,2.912-15.616,12.498-15.616,23.997v10.552v27.009v14.052    c0,2.611,0.435,5.078,1.066,7.44c2.702,10.146,10.653,17.552,20.158,17.552h15.329c11.724,0,21.224-11.188,21.224-24.992V62.553    V35.544V24.992C180.791,11.188,171.291,0,159.567,0z\" /\u003e\n                        \u003cpath d=\"M461.288,0h-15.329c-11.724,0-21.224,11.188-21.224,24.992v10.552v27.009v14.052c0,13.804,9.5,24.992,21.224,24.992    h15.329c11.724,0,21.224-11.188,21.224-24.992V62.553V35.544V24.992C482.507,11.188,473.007,0,461.288,0z\" /\u003e\n                        \u003cpath d=\"M539.586,62.553h-37.954v14.052c0,24.327-18.102,44.117-40.349,44.117h-15.329c-22.247,0-40.349-19.79-40.349-44.117    V62.553H199.916v14.052c0,24.327-18.102,44.117-40.349,44.117h-15.329c-22.248,0-40.349-19.79-40.349-44.117V62.553H70.818    c-21.066,0-38.15,16.017-38.15,35.764v476.318c0,19.784,17.083,35.764,38.15,35.764h468.763c21.085,0,38.149-15.984,38.149-35.764    V98.322C577.735,78.575,560.671,62.553,539.586,62.553z M527.757,557.9l-446.502-0.172V173.717h446.502V557.9z\" /\u003e\n                        \u003cpath d=\"M353.017,266.258h117.428c10.193,0,18.437-10.179,18.437-22.759s-8.248-22.759-18.437-22.759H353.017    c-10.193,0-18.437,10.179-18.437,22.759C334.58,256.074,342.823,266.258,353.017,266.258z\" /\u003e\n                        \u003cpath d=\"M353.017,348.467h117.428c10.193,0,18.437-10.179,18.437-22.759c0-12.579-8.248-22.758-18.437-22.758H353.017    c-10.193,0-18.437,10.179-18.437,22.758C334.58,338.288,342.823,348.467,353.017,348.467z\" /\u003e\n                        \u003cpath d=\"M353.017,430.676h117.428c10.193,0,18.437-10.18,18.437-22.759s-8.248-22.759-18.437-22.759H353.017    c-10.193,0-18.437,10.18-18.437,22.759S342.823,430.676,353.017,430.676z\" /\u003e\n                        \u003cpath d=\"M353.017,512.89h117.428c10.193,0,18.437-10.18,18.437-22.759c0-12.58-8.248-22.759-18.437-22.759H353.017    c-10.193,0-18.437,10.179-18.437,22.759C334.58,502.71,342.823,512.89,353.017,512.89z\" /\u003e\n                        \u003cpath d=\"M145.032,266.258H262.46c10.193,0,18.436-10.179,18.436-22.759s-8.248-22.759-18.436-22.759H145.032    c-10.194,0-18.437,10.179-18.437,22.759C126.596,256.074,134.838,266.258,145.032,266.258z\" /\u003e\n                        \u003cpath d=\"M145.032,348.467H262.46c10.193,0,18.436-10.179,18.436-22.759c0-12.579-8.248-22.758-18.436-22.758H145.032    c-10.194,0-18.437,10.179-18.437,22.758C126.596,338.288,134.838,348.467,145.032,348.467z\" /\u003e\n                        \u003cpath d=\"M145.032,430.676H262.46c10.193,0,18.436-10.18,18.436-22.759s-8.248-22.759-18.436-22.759H145.032    c-10.194,0-18.437,10.18-18.437,22.759S134.838,430.676,145.032,430.676z\" /\u003e\n                        \u003cpath d=\"M145.032,512.89H262.46c10.193,0,18.436-10.18,18.436-22.759c0-12.58-8.248-22.759-18.436-22.759H145.032    c-10.194,0-18.437,10.179-18.437,22.759C126.596,502.71,134.838,512.89,145.032,512.89z\" /\u003e\n                    \u003c/g\u003e\n                \u003c/g\u003e\n            \u003c/svg\u003e\n        \u003c/div\u003e\n    \u003c/JBDateInput\u003e\n```\n## Change Month List\n\nyou may want to change the default month list for both  of Jalali and Gregorian calendars base on your country month labels. here how you can do it:   \n\n```jsx\ndocument.querySelector('jb-date-input').setMonthList('GREGORIAN',['1','2','3','4','5','6','7','8','9','10','11','12']);\n\u003cJBDateInput jalaliMonthList={['حَمَل','ثَور','جَوزا','سَرَطان','اَسَد','سُنبُله','میزان','عَقرَب','قَوس','جَدْی','دَلو','حوت']}\u003e\u003c/JBDateInput\u003e\n\u003cJBDateInput gregorianMonthList={['1','2','3','4','5','6','7','8','9','10','11','12']}\u003e\u003c/JBDateInput\u003e\n```\n## overflow handler\n\nsometimes you place date input inside modal or end of the pages so when user open the input picker it overflow the page and some part of picker will be invisible.  \nto fix this we add a feature called `overflowHandler` by set this to `SLIDE` the picker will move, on mouse enter it's territory so user can easily pick date\n```jsx\n\u003cJBDateInput overflowHandler=\"SLIDE\" /\u003e\n//if you want to check your overflow base on another dom and not window for example when you put date input in a modal\n\u003cdiv ref={ref} style={{ height: \"12rem\", border: \"solid 1px #666\", overflow:\"hidden\" }}\u003e\n    \u003cJBDateInput {...args} overflowRef={ref} /\u003e\n\u003c/div\u003e\n```\n\n### set custom style\n\nin some cases in your project you need to change defualt style of react-component for example you need zero margin or different border-radius and etc.    \nif you want to set a custom style to this react-component all you need is to set css variable in parent scope of react-component.    \n#### usage example:\n\n```css\nbody{\n/* if you need more margin */\n  --jb-date-input-margin: 16px 32px\n/* if you dont waant rounded corner */\n  --jb-date-input-border-radius:0px;\n/* if you want different text color*/\n  --jb-date-input-value-color:red;\n}\n```\n#### variable list\nthis list may be outdated so i suggest you to read [jb-date-input](https://github.com/javadbat/jb-date-input) doc for more updated list of styles\n\n| css variable name                             | description                                                               |\n| -------------                                 | -------------                                                             |\n| --jb-date-input-margin                        | web-component margin default is `0 12px`                                  |\n| --jb-date-input-border-radius                 | web-component border-radius default is `16px`                             |\n| --jb-date-input-border-color                  | border color of select in normal mode                                     |\n| --jb-date-input-border-color-focus            | border color when user focus on input                                     |\n| --jb-date-input-bgcolor                       | background color of input                                                 |\n| --jb-date-input-message-box-display           | default is block but if you set it to none message box will be hidden     |\n| --jb-date-input-message-box-color             | change color of message under box                                         | \n| --jb-date-input-message-box-color-error       | change color of message under box                                         |\n| --jb-date-input-message-box-font-size         | font-size of message box under the input box                              |\n| --jb-date-input-message-box-font-weight       | font-weight of message box under the input box                            |\n| --jb-date-input-message-box-padding           | font-size of message box under the input box                              | \n| --jb-date-input-text-align                    | text align of input                                                       |\n| --jb-date-input-box-height                    | height of input box                                                       |\n| --jb-date-input-border-width                  | general border width default is `1px`                                     |\n| --jb-date-input-border-bottom-width           | border bottom width default is `3px`                                      |\n| --jb-date-input-label-font-size               | font size of date input label default is `0.8em`                          |\n| --jb-date-input-label-margin                  | change label margin default is `0 4px`                                    |\n| --jb-date-input-label-weight                  | label font-weight default is normal                                       |\n| --jb-date-input-placeholder-color             | input placeholder color default is `initial`                              |\n| --jb-date-input-placeholder-font-size         | place holder font size default is `1.1em`                                 |\n| --jb-date-input-value-color                   | date input value color default is `#1f1735`                               |\n| --jb-date-input-value-font-size               | date input value font-size                                                |\n| --jb-date-input-calender-wrapper-bg-color     | calender background color default color is `#fff`                         |\n| --jb-date-input-calendar-wrapper-z-index      | opend calendar `z-index` is `10` but you can change it to number you want |\n| --jb-date-input-calender-wrapper-border-radius| calendar border radius default is `24px`                                  |\n| --jb-date-input-input-margin                  | input margin default is `4px 0`                                           |\n| --jb-date-input-box-shadow                    | input box-shadow default is none                                          |\n| --jb-date-input-box-shadow-focus              | input box-shadow when input is focused default is none                    |\n\n\n## add custom element in input box\n\nin jb-input you can put icon or any other custom html DOM in input box. to doing so you just have to place custom element in `JBDateInput` tag and add `slot=\"start-section\"` or `slot=\"end-section\"` to place it before or after input field.\n```jsx\n\u003cJBDateInput\u003e\n    \u003cdiv slot=\"end-section\"\u003eafter\u003c/div\u003e\n    \u003cdiv slot=\"start-section\"\u003ebefore\u003c/div\u003e\n\u003c/JBDateInput\u003e\n```\n\n## Other Related Docs:\n\n- see [jb-date-input](https://github.com/javadbat/jb-date-input) if you want to use this component as a web-component\n\n- see [All JB Design system Component List](https://github.com/javadbat/design-system/blob/master/docs/component-list.md) for more components\n\n- use [Contribution Guide](https://github.com/javadbat/design-system/blob/master/docs/contribution-guide.md) if you want to contribute in this component.","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavadbat%2Fjb-date-input-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjavadbat%2Fjb-date-input-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavadbat%2Fjb-date-input-react/lists"}