{"id":44944575,"url":"https://github.com/itte1/input-dt","last_synced_at":"2026-02-18T09:31:02.282Z","repository":{"id":231398367,"uuid":"781697814","full_name":"itte1/input-dt","owner":"itte1","description":"Web library for date and time input without JavaScript.","archived":false,"fork":false,"pushed_at":"2024-04-13T08:41:50.000Z","size":334,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-10-05T12:42:47.458Z","etag":null,"topics":["custom-element","datepicker","html","intl","javascript","localization","php","timepicker"],"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/itte1.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,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-04-03T21:44:01.000Z","updated_at":"2024-04-07T19:11:21.000Z","dependencies_parsed_at":"2024-04-05T02:31:58.336Z","dependency_job_id":"1743eec6-6026-4676-a9b1-682d1804831e","html_url":"https://github.com/itte1/input-dt","commit_stats":null,"previous_names":["itte1/dt-picker"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/itte1/input-dt","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itte1%2Finput-dt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itte1%2Finput-dt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itte1%2Finput-dt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itte1%2Finput-dt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/itte1","download_url":"https://codeload.github.com/itte1/input-dt/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itte1%2Finput-dt/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29574472,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-18T08:38:15.585Z","status":"ssl_error","status_checked_at":"2026-02-18T08:38:14.917Z","response_time":162,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["custom-element","datepicker","html","intl","javascript","localization","php","timepicker"],"created_at":"2026-02-18T09:31:01.482Z","updated_at":"2026-02-18T09:31:02.277Z","avatar_url":"https://github.com/itte1.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# input-dt\r\n\r\ninput-dt is a library for datetime input. You can use it without JavaScript. Easy to use with PHP.\r\n\r\n- A custom element\r\n- **Framework independent**\r\n- **Automatically localized**\r\n- Dark mode support\r\n- Date periods support\r\n- Customizable\r\n\r\n\u003cimg width=\"230\" alt=\"スクリーンショット 2024-04-07 205616\" src=\"https://github.com/itte1/input-dt/assets/57395168/c2c0f5e0-2e56-4ee5-af73-886cfb5b6769\"\u003e\r\n\u003cimg width=\"230\" alt=\"スクリーンショット 2024-04-07 2056582\" src=\"https://github.com/itte1/input-dt/assets/57395168/4fbb6995-0dad-4345-b759-f32d6d0f1ef4\"\u003e\r\n\r\n# Basic usage\r\n\r\nImport js and css files beforehand. This is an example of importing from a CDN.\r\n\r\n```html\r\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/input-dt@0.1.2/input-dt-min.css\"\u003e\r\n\u003cscript type=\"module\" src=\"https://cdn.jsdelivr.net/npm/input-dt@0.1.2/input-dt-min.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\nTo start, write an `input[type=\"text\"]` tag and enclose it in an `input-dt` tag.  You can optionally add attributes to the `input-dt` tag.\r\n\r\nNext, add the `input-dt` attribute to the `input[type=\"text\"]`.\r\n\r\nThe picker is added as the last element of the `input-dt`.\r\n\r\n```html\r\n\u003clabel for=\"calender\"\u003eDatetime:\u003c/label\u003e\r\n\u003cinput-dt\r\n  value=\"2024-03-10\"\r\n  min=\"2024-01-01\"\r\n  max=\"2026-12-31\"\r\n  disable=\"2024-08-31,2024-12-31\"\r\n  hours=\"0,3,6,9,12,15,18,21\"\r\n  minutes=\"0,10,20,30,40,50\"\r\n  seconds=\"0,10,20,30,40,50\"\r\n  unit=\"seconds\"\r\n  locales=\"ja\"\r\n  first-day=\"0\"\r\n  background=\"true\"\r\n  auto-close=\"true\"\r\n\u003e\r\n  \u003cinput type=\"text\" name=\"calender\" input-dt\u003e\r\n\u003c/input-dt\u003e\r\n```\r\n\r\n## More examples\r\n\r\nSee [the examples directory](https://github.com/itte1/input-dt/tree/main/examples) for examples in HTML only, Bootstrap, Vue.js, React, Jito, and PHP.\r\n\r\n## Import for Node.js\r\n\r\n```bash\r\nnpm i input-dt\r\n```\r\n\r\nImport js and css at entry point.\r\n\r\n```js\r\nimport 'input-dt'\r\nimport 'input-dt/input-dt.css'\r\n```\r\n\r\n## Attributes for child elements\r\n\r\n| Attribute | Description |\r\n| --- | --- |\r\n| `input-dt` | This attribute can be attached to `input[type=\"text\"]` or `input[type=\"datetime-local\"]`, which opens the picker when the focus is set. It will also fire an input event whenever any datetime is selected. Optionally supports formatting. The supported formats are described below. |\r\n| `input-dt-open` | If this attribute is specified, the picker will be opened when the element is clicked. |\r\n| `input-dt-clear` | If this attribute is specified, clicking on the element will clear the date/time value. |\r\n| `input-dt-display` | If this attribute is specified, each time a datetime is selected, the element's children are overwritten with text nodes representing the datetime. Optionally supports formatting. The supported formats are described below. |\r\n| `input-dt-value` | When associated with an element, it updates the value of the element when a date/time is selected. Optionally supports formatting. The supported formats are described below. |\r\n\r\n## Attributes for the `input-dt` element\r\n\r\nThe `input-dt` element provides several attributes. These are default values and also detect dynamic changes.\r\n\r\n| Attribute | Description |\r\n| --- | --- |\r\n| `value` | Value selected by input-dt. |\r\n| `min` | Minimum number of selectable dates. By default, New Year's Day 120 years ago.\u003cbr\u003eA comma-separated list of dates in the format YYYY-MM-DD and a selector string identifying other `dt-picker` elements. If multiple dates are given, the most recent date is used. |\r\n| `max` | Maximum selectable dates. By default, the last day of the year after 10 years.\u003cbr\u003eA comma-separated list of dates in the format YYYY-MM-DD and a selector string identifying other `dt-picker` elements. If multiple dates are given, the earliest date is used. |\r\n| `disable` | List of dates that cannot be selected.\u003cbr\u003eA comma-separated list of dates in the format YYYY-MM-DD and a selector string identifying other `dt-picker` elements. |\r\n| `hours` | Options for the hour. |\r\n| `minutes` | Options for the minute. |\r\n| `seconds` | Options for the second. |\r\n| `unit` | Minimum unit of datetime. `day` - date picker only, or `hour`, `minute`, `second`(default). |\r\n| `locales` | A locale identifier used for all parts of the modal. By default, it will be the default locale of the web browser. |\r\n| `first-day` | First day of the week. An integer, between 0 and 6. By default, this is the default locale of the web browser. However, FireFox is not supported, so the value is 0. |\r\n| `background` | Normally, a modal is closed by clicking somewhere other than the modal. This is done by receiving the `click` event of the `document`. Therefore, if there is an element that stops the propagation of events, the modal will not close.\u003cbr\u003eIf the `background` attribute is set to `true`, a filter that closes the modal on click will cover the entire screen. |\r\n| `autoclose` | If set to true, the modal will only close when a date is selected in the date picker only. |\r\n\r\n## All supported formats\r\n\r\ninput-dt, input-dt-display and input-dt-value support formatting as attribute values. See the following table.\r\nIf you do not specify a format, it defaults to the localized format.\r\n\r\n| Format | Output | Note |\r\n| --- | --- | --- |\r\n| yy | 26 | The 2-digit year |\r\n| yyyy | 2026 | The 4-digit year |\r\n| YYYY | 2026 | The full year |\r\n| M | 1 to 12 | The numeric month |\r\n| MM | 01 to 12 | The 2-digit month |\r\n| D | 1 to 31 | The numeric day of month |\r\n| DD | 01 to 31 | The 2-digit day of month |\r\n| H | 0 to 23 | The numeric hour |\r\n| HH | 00 to 23 | The 2-digit hour |\r\n| m | 0 to 59 | The numeric minute |\r\n| mm | 00 to 59 | The 2-digit minute |\r\n| s | 0 to 59 | The numeric second |\r\n| ss | 00 to 59 | The 2-digit second |\r\n\r\n# Customize Style\r\n\r\nYou can easily change the style.\r\n\r\n## Simple Customize\r\n\r\nYou can customise colours using CSS custom properties.\r\n\r\n```css\r\n.input-dt {\r\n  --input-dt-color: #FFF;\r\n  --input-dt-background: #323232;\r\n  --input-dt-highlight: rgb(136, 214, 83);\r\n  --input-dt-disable: #777;\r\n  --input-dt-outside: #BBB;\r\n  --input-dt-outside-visibility: visible;\r\n  --input-dt-font-family: serif;\r\n}\r\n```\r\n\r\n\u003cimg width=\"229\" alt=\"image\" src=\"https://github.com/itte1/input-dt/assets/57395168/7f876b45-6ee7-46a0-90ba-c14c08eadc32\"\u003e\r\n\r\n## CSS overwrite\r\n\r\nYou can use the developer tool or other tools to find out the used class name and override it.\r\n\r\n\u003cimg width=\"230\" alt=\"image\" src=\"https://github.com/itte1/input-dt/assets/57395168/3214472b-ba24-4ac9-ba3c-8b13fc8ecca1\"\u003e\r\n\r\n# Setting Properties\r\n\r\nWhen the input-dt element is accessed via JavaScript, several properties are available.\r\n\r\n| Property | Type | Description |\r\n| --- | --- | --- |\r\n| `value` | Date \\| null | Value selected by input-dt. |\r\n| `min` | Date \\| null | Minimum selectable dates. By default, New Year's Day 120 years ago. If a null value is assigned, it is initialized to the default value. |\r\n| `max` | Date \\| null | Maximum selectable dates. By default, the last day of the year after 10 years. If a null value is assigned, it is initialized to the default value. |\r\n| `disable` | Date[] | List of dates that cannot be selected. |\r\n| `hours` | number[] \\| null | Options for the hour. |\r\n| `minutes` | number[] \\| null | Options for the minute. |\r\n| `seconds` | number[] \\| null | Options for the second. |\r\n| `unit` | string | Minimum unit of datetime. `day` - date picker only, or `hour`, `minute`, `second`(default). |\r\n| `locales` | string \\| null | A locale identifier used for all parts of the modal. By default, it will be the default locale of the web browser. |\r\n| `firstDay` | number \\| null | First day of week. By default, it will be the default locale of the web browser. |\r\n| `background` | boolean | See the `background` attribute. |\r\n| `autoclose` | boolean | See the `autoclose` attribute. |\r\n| `modal` | Element | **Read-only**. A property for direct access to the elements of a modal. |\r\n| `format` | (date: Date) =\u003e string | **Write-only**. It is possible to change the display of `input-dt` or `input-dt-display`. If used, the format attribute becomes invalid. |\r\n| `formatYear` | (date: number) =\u003e string | **Write-only**. It is possible to change the text portion displaying the year and the year options. |\r\n| `formatMonth` | (date: number) =\u003e string | **Write-only**. It is possible to change the text portion displaying the month and the month options. |\r\n| `formatWeek` | (value: number) =\u003e string | **Write-only**. The display text of week headings in the calendar can be changed. |\r\n| `formatDay` | (date: Date) =\u003e string | **Write-only**. The text of each day of the calendar can be changed. |\r\n| `formatHour` | (value: number) =\u003e string | **Write-only**. The text of the hour options can be changed. |\r\n| `formatMinute` | (value: number) =\u003e string | **Write-only**. The text of the minute options can be changed. |\r\n| `formatSecond` | (value: number) =\u003e string | **Write-only**. The text of the second options can be changed. |\r\n| `renderYear` | (value: number, flags: Flags) =\u003e Element | **Write-only**. The entire element of the year option can be replaced. |\r\n| `renderMonth` | (value: number, flags: Flags) =\u003e Element | **Write-only**. The entire element of the month option can be replaced. |\r\n| `renderWeek` | (value: number) =\u003e Element | **Write-only**. It is possible to change the elements of the calendar week headings in their entirety. |\r\n| `renderDate` | (date: Date, flags: Flags) =\u003e Element | **Write-only**. It is possible to change the elements of each day of the calendar in its entirety. |\r\n| `renderHour` | (value: number, flags: Flags) =\u003e Element | **Write-only**. The entire element of the hour option can be replaced. |\r\n| `renderMinute` | (value: number, flags: Flags) =\u003e Element | **Write-only**. The entire element of the minute option can be replaced. |\r\n| `renderSecond` | (value: number, flags: Flags) =\u003e Element | **Write-only**. The entire element of the second option can be replaced. |\r\n\r\nThe Flags type has the following properties\r\n\r\n- `isSelected` - This value is the currently selected.\r\n- `isWeekend` - renderDate only. It is the weekend as determined by the current locale.\r\n- `isInside` - renderDate only. This date is inside the currently selected years and months.\r\n- `isOutside` - renderDate only. This date is outside the currently selected years and months.\r\n- `isDisabled` - renderDate only. This date has been disabled.\r\n\r\n\r\nThese properties can be used to create a new custom element as follows.\r\n\r\n```js\r\nimport { InputDt } from 'input-dt'\r\n\r\nexport class InputDtJa extends InputDt {\r\n  constructor() {\r\n    super()\r\n    this.locales = 'ja'\r\n  }\r\n}\r\n\r\nwindow.customElements.define('input-dt-ja', InputDtJa)\r\n```\r\n\r\n# Events\r\n\r\nThe `input-dt` element receives an `input` event each time a date/time is selected.\r\n\r\nAt the same time, input-dt also sends an `input` event to input elements with `input-dt`.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitte1%2Finput-dt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitte1%2Finput-dt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitte1%2Finput-dt/lists"}