{"id":21900585,"url":"https://github.com/dzns/dzdatetimepicker","last_synced_at":"2025-04-15T19:54:04.746Z","repository":{"id":57217977,"uuid":"57192685","full_name":"DZNS/DZDateTimePicker","owner":"DZNS","description":"Functional, Extensible \u0026 Simple DateTime picker without any dependencies.","archived":false,"fork":false,"pushed_at":"2020-10-09T04:11:18.000Z","size":243,"stargazers_count":10,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T00:33:40.515Z","etag":null,"topics":["css","es6","html","javascript","picker"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/DZNS.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-27T07:22:00.000Z","updated_at":"2022-08-12T09:00:58.000Z","dependencies_parsed_at":"2022-08-28T21:40:43.828Z","dependency_job_id":null,"html_url":"https://github.com/DZNS/DZDateTimePicker","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DZNS%2FDZDateTimePicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DZNS%2FDZDateTimePicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DZNS%2FDZDateTimePicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DZNS%2FDZDateTimePicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DZNS","download_url":"https://codeload.github.com/DZNS/DZDateTimePicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248960744,"owners_count":21189988,"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":["css","es6","html","javascript","picker"],"created_at":"2024-11-28T15:09:04.855Z","updated_at":"2025-04-15T19:54:04.712Z","avatar_url":"https://github.com/DZNS.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DZDateTimePicker\nFunctional, Extensible \u0026amp; Simple Date and Time picker without any dependencies.  \n\nDZDateTimePicker also automatically adds support for:  \n```html\ninput[type=\"date\"]\ninput[type=\"time\"]\ninput[type=\"datetime-local\"]\n```\nif they are not supported natively. You don't have to do anything extra. The library will handle the setup for you. You simply have to query the `.value` of your original input elements and you're all set.  \n\n### Demos  \nThe related demos are in the `demo` folder of this repo.  \nOn a related note:   \n- All source files are in the `src` directory.\n- All distribution files are in the `dist` directory (which you should use for production sites)\n\n### Setup\nVia NPM\n```sh\nnpm install --save dzdatetimepicker\n```\n\n```html\n\u003cscript src=\"dzdatetimepicker-dist.js\"\u003e\u003c/script\u003e\n\n\u003c!-- The stylesheet. You can include your own instead --\u003e\n\u003clink rel=\"stylesheet\" href=\"dzdatetimepicker.css\" /\u003e\n```\n\n### Date Picker Usage\nSimply,\n```html\n\u003cinput type=\"datetime-local\" name=\"epoch-start\" /\u003e\n```\nDZDateTimePicker will allow native browser implementations to take over if they exist. If they don't, the library will do it's own wiring for you. \n\n\nYou can optionally initiate the date picker by wiring up a *trigger* element like so:\n```html\n\u003cbutton \n  class=\"date-trigger\" \n  data-date-max=\"2016-05-09\" \n  data-date-min=\"2016-01-01\" \n  data-onset=\"didSetDate\"\n\u003eTrigger\u003c/button\u003e\n```\n\nThe few important things to note are:  \n- when `dzdatetimepicker-dsit.js` runs, it automatically finds elements with the class `date-trigger` and hooks on to them. No futher configuration is required.\n- You can set additional, *optional* dataset items like `date-max` and `date-min` to control the selectable items within a range. Both are optional, and you can use only one if desired.\n- the last parameter, `onset` is required if you need a callback when the user selects a date. This is optional, however, your implementation will require it if you need to update the UI. The implementation for this is intentionally left out.\n\n### Timer Picker Usage\nSimply,\n```html\n\u003cinput type=\"time\" name=\"epoch-start\" /\u003e\n```\n\nYou can optionally initiate the time picker by wiring up a *trigger* element like so:\n```html\n\u003cdiv \n  role=\"button\" \n  class=\"trigger timer-trigger\" \n  data-onchange=\"didSetTime\"\n\u003eTime Trigger\u003c/div\u003e\n```\nWhen the script loads, it automatically hooks on to elements with the class `timer-trigger`. No other configuration is necessary. Similar to the date picker, the last parameter, `onchange` is required if you need a callback when the user selects a date. This is optional, however, your implementation will require it if you need to update the UI. The implementation for this is intentionally left out.\n\nThe callback, unlike the date picker, responds with an object in the following format:\n```json\n{\n  \"string\" : \"14:26\",\n  \"hours\" : 14,\n  \"minutes\" : 26\n}\n```\n\n### Range Picker Usage\nTo setup a range picker, include the `rangepicker-dist.js` file along with the date-picker sources as mentioned above. Then you can can write simple markup as follows:  \n```html\n\u003cdiv id=\"range-picker\"\u003e\n  \n  \u003cdiv \n    role=\"button\" \n    class=\"trigger range-start\" \n    data-date-max=\"2017-05-09\" \n    data-date-min=\"2016-01-01\" \n    data-onset=\"didSetDate\"\n  \u003eStart\u003c/div\u003e\n    \n  \u003cdiv \n    role=\"button\" \n    class=\"trigger range-end\" \n    data-date-max=\"2017-05-09\" \n    data-date-min=\"2016-01-01\" \n    data-onset=\"didSetDate\"\n  \u003eEnd\u003c/div\u003e\n  \n\u003c/div\u003e\n```\n\nYou can then initialise the range picker as follows:\n```js\nconst myRangePicker = new RangePicker(document.getElementById(\"range-picker\"))\n```\n\nThe `RangePicker` will then automatically handle all the setup for you and adjust the min-max ranges for the date picker based on the user's input. \n\n### Notes\n- Both the datepicker and timepicker automatically idenity `\u003cinput\u003e` elements. They hook on to the `focus` and `blur` events so the user can use the pickers to set the values directly. \n- If the pickers detect an `\u003cinput\u003e` element, the pickers will update the `value` attribute when the user updates their selection. \n- When not using an `\u003cinput\u003e` element, you can optionally set the attribute `data-date-val=\"\"` and it'll be updated similarly. \n\n### Keyboard Navigation\n#### Date picker\n- `Tab`, `→` to move to the next date\n- `Shift + Tab`, `←` to move to the previous date\n- `Space` or `Enter` to confirm input\n- `Escape` to dismiss the datepicker\n- `Home` to go to the first date in the month\n- `End` to go to the last date in the month\n- `Page Up` to go to the previous month\n- `Page Down` to go to the next month\n\n#### Time picker\n- `Tab` to move to the next control\n- `Shift + Tab` to move to the previous control\n- `Enter` to confirm input\n- `Space` to confirm control input\n\n### License\nDZDateTimePicker is licensed under the MIT License. Please refer to the LICENSE file for more information. \n\n### Author\nNikhil Nigade (Dezine Zync Studios)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdzns%2Fdzdatetimepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdzns%2Fdzdatetimepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdzns%2Fdzdatetimepicker/lists"}