{"id":23039333,"url":"https://github.com/javadbat/jb-date-input","last_synced_at":"2025-04-06T01:09:15.966Z","repository":{"id":38839699,"uuid":"283135042","full_name":"javadbat/jb-date-input","owner":"javadbat","description":"jalali date input with date picker support both touch screen for mobile user and keyboard typing for desktop user","archived":false,"fork":false,"pushed_at":"2025-03-28T14:25:47.000Z","size":258,"stargazers_count":59,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-30T00:08:05.591Z","etag":null,"topics":["calendar","custom-elements","datepicker","jalali","jalali-date-picker","javascript"],"latest_commit_sha":null,"homepage":"","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":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-28T07:28:12.000Z","updated_at":"2025-03-28T14:25:51.000Z","dependencies_parsed_at":"2024-05-15T13:03:34.299Z","dependency_job_id":"30f77a48-4915-482b-8a6a-1962c3552a08","html_url":"https://github.com/javadbat/jb-date-input","commit_stats":{"total_commits":155,"total_committers":2,"mean_commits":77.5,"dds":0.006451612903225823,"last_synced_commit":"bebd776d92825eded34b5049837fc71bc7e6c951"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javadbat%2Fjb-date-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javadbat%2Fjb-date-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javadbat%2Fjb-date-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javadbat%2Fjb-date-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/javadbat","download_url":"https://codeload.github.com/javadbat/jb-date-input/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247419860,"owners_count":20936012,"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","custom-elements","datepicker","jalali","jalali-date-picker","javascript"],"created_at":"2024-12-15T18:30:20.558Z","updated_at":"2025-04-06T01:09:15.946Z","avatar_url":"https://github.com/javadbat.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jb-date-input\n\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/jb-date-input)\n[![GitHub license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://raw.githubusercontent.com/javadbat/jb-date-input/main/LICENSE)\n[![NPM Downloads](https://img.shields.io/npm/dw/jb-date-input)](https://www.npmjs.com/package/jb-date-input)\n\n## Pure js Jalali Date Picker Web-Component\n\nweb component date input (picker) to get date (jalali \u0026 gregorian) from user.\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- 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\n- compatible with native HTML `form` element to send data to server.\n\nDemo \u0026 Sample:    \n\nin github pages: \u003chttps://javadbat.github.io/jb-date-input/\u003e    \nin codepen: \u003chttps://codepen.io/javadbat/pen/qBRyYKY\u003e \n\n## using with JS frameworks\n\nto use this component in **react** see [`jb-date-input/react`](https://github.com/javadbat/jb-date-input/tree/main/react);\n\n## instructions\n\n### getting started\n\n#### using npm\n\n1- install package:\n\n```command\nnpm i jb-date-input\n```\n\n2- import package in one of your `.js` file:\n\n```js\nimport 'jb-date-input';\n```\n\n3- use it in your `.html` file like any other tag:\n\n```HTML\n\u003cjb-date-input label=\"date label\"\u003e\u003c/jb-date-input\u003e\n```\n#### using cdn\n\nbeware that jb-date-input umd build do not exclude external dependancy and bundled as a standalone module, so only use this way if you dont access npm in your app.   \n\n1- you can just add script tag to your html file and then use web component how ever you need.    \n\n```HTML\n\u003cscript src=\"https://unpkg.com/jb-date-input/dist/JBDateInput.umd.js\"\u003e\u003c/script\u003e\n```\n2- use it in your `.html` file like any other tag:\n\n```HTML\n\u003cjb-date-input label=\"date label\"\u003e\u003c/jb-date-input\u003e\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 charecter 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```html\n\n\u003cjb-date-input label=\"تاریخ\" format=\"YYYY/MM/DD\" value=\"2020/08/14\"\u003e\u003c/jb-date-input\u003e\n\n```\n\n## Value Type\n\nwe have 3 value type:\n\n```html\n    \u003cjb-date-input value=\"2020-08-01T14:05:39.530Z\" value-type=\"GREGORIAN\"/\u003e\n    \u003cjb-date-input value=\"1596291030322\" value-type=\"TIME_STAMP\"/\u003e\n    \u003cjb-date-input value=\"1399-05-01T12:05:39.530Z\" value-type=\"JALALI\"/\u003e\n```\nby setting value type you can tell component what type of value you provideing to it and expecting from it. remember that value type is not effect input type, for example user input jalali date but you will get gregorian date when call `e.target.value`. you can also provide and get js `Date` type for more performance if you like see \"get value\" section for get and for set just set value like: `element.value = new Date()`.\n\n## min and max date limit\n\nyou can set minimum date and maximum date range for your date input in 2 way:    \n\n1- by html attribute in string format of your value\n\n```html\n \u003cjb-date-input 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/jb-date-input\u003e\n```\n2- by call `setMinDate` and `setMaxDate` function and providing string or Date format:\n\n```javascript\nconst today = new Date();\ndocument.querySelector('jb-date-input').setMinDate(today)\nconst max = new Date('2022-08-15T08:51:23.176Z');\ndocument.querySelector('jb-date-input').setMaxDate(max);\n// or string\ndocument.querySelector('jb-date-input').setMinDate('2022-08-15T08:51:23.176Z');\n\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 HTML DOM or `placeholder` in JavaScript: \n\n```html\n \u003cjb-date-input placeholder=\"Enter Date Here\"\u003e\n \u003c/jb-date-input\u003e\n```\n```js\ndocument.querySelector('jb-date-input').placeholder = `Enter Date Here`;\n```\n## custom validation\n\nbeside of min and max you can also set your own custom validation like any other jb web components family to achieve this you must create a array of validations and assign them to component\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];\ndocument.querySelector('jb-date-input').validation.list = validationList\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```js\n// if show error was false, in case of error component dont show error itself and function will return if data valid or not\nconst showError = true\nconst validationObj = dom.validation.checkValidity({showError})\n```\n\n## events\n\n```js\n//when default property are defined best time for impl your config like min and max date\ndocument.querySelector('jb-date-input').addEventListener('init',this.onCalendarElementInitiated);\n\n//when calendar init all property and function and dom created and bind successfully\ndocument.querySelector('jb-date-input').addEventListener('load',this.onCalendarElementLoaded);\ndocument.querySelector('jb-date-input').addEventListener('change',(e)=\u003e{\n    //value in string\n    console.log(e.target.value)\n    //value in js Date object\n    console.log(e.target.valueInDate)\n});\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 jb-date-input you can specify how user must fill the date input.\nto achive this you have to set `input-type` attribute or set `inputType` object to component dom directly.\nto set it as attribute you can set value like this:\n\n```HTML\n\u003cjb-date-input input-type=\"GREGORIAN\"\u003e\u003c/jb-date-input\u003e\n\u003cjb-date-input input-type=\"JALALI\"\u003e\u003c/jb-date-input\u003e\n```\n\nand for doing it with direct DOM assignment you can use following js code:\n\n```js\n//to show gregorian calendar\ndocument.querySelector('jb-date-input').inputType = \"GREGORIAN\" \ndocument.querySelector('jb-date-input').inputType = \"JALALI\"\n```\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 `setCalendarDefaultDateView`function like this:\n\n```javascript\nconst year = 1360\nconst month = 5\n//just set year and month for current input-type date type\ndocument.querySelector('jb-date-input').setCalendarDefaultDateView(year,month);\n//set default year and month for gregorian input-type\ndocument.querySelector('jb-date-input').setCalendarDefaultDateView(year,month,'GREGORIAN');\n//set default year and month for jalali input-type\ndocument.querySelector('jb-date-input').setCalendarDefaultDateView(year,month,'JALALI');\n```\n## get value\nyou can get the selected date by using following method:\n```javascript\n    // return string value base on your provided format and value type\n    document.querySelector('jb-date-input').value   \n\n    // return javascript Date value (or null)\n    document.querySelector('jb-date-input').valueInDate\n\n```\nnote that providing \u0026 getting value with `Date` is faster and more perfomant than using value string\n\n\n## show persian number\nif you want to show persian number instead of English number char you just have to set `show-persian-number` attribute like this:\n```javascript\n\u003cjb-date-input show-persian-number\u003e\u003c/jb-date-input \u003e\n//or\n\u003cjb-date-input show-persian-number=\"true\"\u003e\u003c/jb-date-input \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 web component with `slot=\"calendar-trigger-icon\"` like below:\n\n```html\n\u003cjb-date-input \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/jb-date-input\u003e\n```\n## Change Month List\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```js\ndocument.querySelector('jb-date-input').setMonthList('JALALI',['حَمَل','ثَور','جَوزا','سَرَطان','اَسَد','سُنبُله','میزان','عَقرَب','قَوس','جَدْی','دَلو','حوت']);\ndocument.querySelector('jb-date-input').setMonthList('GREGORIAN',['1','2','3','4','5','6','7','8','9','10','11','12']);\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```js\ndocument.querySelector('jb-date-input').elements.popover.overflowHandler = \"SLIDE\"\n```\n## set custom style\n\nin some cases in your project you need to change default style of web-component for example you need zero margin or different border-radius and etc.    \nif you want to set a custom style to this web-component all you need is to set css variable in parent scope of web-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 want rounded corner */\n  --jb-input-border-radius:0px;\n/* if you want different text color*/\n  --jb-input-value-color:red;\n}\n```\n\nyou can customize jb-date-input look  by setting css variable in your app.    \njb-date-input use [jb-input](https://github.com/javadbat/jb-input) and [jb-calendar](https://github.com/javadbat/jb-calendar) and [jb-popover](https://github.com/javadbat/jb-popover) underneath so to change the styles of your component read custom style section of these components and set their css variable.    \nmore than above here is the css variable that we use in jb-date-input itself:    \n\n#### variable list\n \n| css variable name                             | description                                                               |\n| -------------                                 | -------------                                                             |\n| --jb-date-input-margin                        | web-component margin default is `0 0`                                     |\n| --jb-date-input-calendar-trigger-display      | set it no none to hide calendar icon                                      |\n| --jb-date-input-calendar-trigger-width        | set calendar icon width                                                   |\n| --jb-date-input-calendar-trigger-height       | set calendar icon height                                                  |\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 DOM in `jb-date-input` tag and add `slot=\"start-section\"` or `slot=\"end-section\"` to place it before or after input field.\nexample:\n\n```HTML\n\u003cjb-date-input\u003e\n    \u003cdiv slot=\"end-section\"\u003eafter\u003c/div\u003e\n    \u003cdiv slot=\"start-section\"\u003ebefore\u003c/div\u003e\n\u003c/jb-date-input\u003e\n```\n\n## Other Related Docs:\n\n- see [`jb-date-input/react`](https://github.com/javadbat/jb-date-input/tree/main/react); if you want to use this component in react\n\n- see [All JB Design system Component List](https://github.com/javadbat/design-system/blob/main/docs/component-list.md) for more components\n\n- use [Contribution Guide](https://github.com/javadbat/design-system/blob/main/docs/contribution-guide.md) if you want to contribute in this component.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavadbat%2Fjb-date-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjavadbat%2Fjb-date-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavadbat%2Fjb-date-input/lists"}