https://github.com/itte1/input-dt
Web library for date and time input without JavaScript.
https://github.com/itte1/input-dt
custom-element datepicker html intl javascript localization php timepicker
Last synced: 4 months ago
JSON representation
Web library for date and time input without JavaScript.
- Host: GitHub
- URL: https://github.com/itte1/input-dt
- Owner: itte1
- License: mit
- Created: 2024-04-03T21:44:01.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-13T08:41:50.000Z (about 2 years ago)
- Last Synced: 2025-10-05T12:42:47.458Z (9 months ago)
- Topics: custom-element, datepicker, html, intl, javascript, localization, php, timepicker
- Language: JavaScript
- Homepage:
- Size: 326 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# input-dt
input-dt is a library for datetime input. You can use it without JavaScript. Easy to use with PHP.
- A custom element
- **Framework independent**
- **Automatically localized**
- Dark mode support
- Date periods support
- Customizable
# Basic usage
Import js and css files beforehand. This is an example of importing from a CDN.
```html
```
To 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.
Next, add the `input-dt` attribute to the `input[type="text"]`.
The picker is added as the last element of the `input-dt`.
```html
Datetime:
```
## More examples
See [the examples directory](https://github.com/itte1/input-dt/tree/main/examples) for examples in HTML only, Bootstrap, Vue.js, React, Jito, and PHP.
## Import for Node.js
```bash
npm i input-dt
```
Import js and css at entry point.
```js
import 'input-dt'
import 'input-dt/input-dt.css'
```
## Attributes for child elements
| Attribute | Description |
| --- | --- |
| `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. |
| `input-dt-open` | If this attribute is specified, the picker will be opened when the element is clicked. |
| `input-dt-clear` | If this attribute is specified, clicking on the element will clear the date/time value. |
| `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. |
| `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. |
## Attributes for the `input-dt` element
The `input-dt` element provides several attributes. These are default values and also detect dynamic changes.
| Attribute | Description |
| --- | --- |
| `value` | Value selected by input-dt. |
| `min` | Minimum number of selectable dates. By default, New Year's Day 120 years ago.
A 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. |
| `max` | Maximum selectable dates. By default, the last day of the year after 10 years.
A 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. |
| `disable` | List of dates that cannot be selected.
A comma-separated list of dates in the format YYYY-MM-DD and a selector string identifying other `dt-picker` elements. |
| `hours` | Options for the hour. |
| `minutes` | Options for the minute. |
| `seconds` | Options for the second. |
| `unit` | Minimum unit of datetime. `day` - date picker only, or `hour`, `minute`, `second`(default). |
| `locales` | A locale identifier used for all parts of the modal. By default, it will be the default locale of the web browser. |
| `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. |
| `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.
If the `background` attribute is set to `true`, a filter that closes the modal on click will cover the entire screen. |
| `autoclose` | If set to true, the modal will only close when a date is selected in the date picker only. |
## All supported formats
input-dt, input-dt-display and input-dt-value support formatting as attribute values. See the following table.
If you do not specify a format, it defaults to the localized format.
| Format | Output | Note |
| --- | --- | --- |
| yy | 26 | The 2-digit year |
| yyyy | 2026 | The 4-digit year |
| YYYY | 2026 | The full year |
| M | 1 to 12 | The numeric month |
| MM | 01 to 12 | The 2-digit month |
| D | 1 to 31 | The numeric day of month |
| DD | 01 to 31 | The 2-digit day of month |
| H | 0 to 23 | The numeric hour |
| HH | 00 to 23 | The 2-digit hour |
| m | 0 to 59 | The numeric minute |
| mm | 00 to 59 | The 2-digit minute |
| s | 0 to 59 | The numeric second |
| ss | 00 to 59 | The 2-digit second |
# Customize Style
You can easily change the style.
## Simple Customize
You can customise colours using CSS custom properties.
```css
.input-dt {
--input-dt-color: #FFF;
--input-dt-background: #323232;
--input-dt-highlight: rgb(136, 214, 83);
--input-dt-disable: #777;
--input-dt-outside: #BBB;
--input-dt-outside-visibility: visible;
--input-dt-font-family: serif;
}
```
## CSS overwrite
You can use the developer tool or other tools to find out the used class name and override it.
# Setting Properties
When the input-dt element is accessed via JavaScript, several properties are available.
| Property | Type | Description |
| --- | --- | --- |
| `value` | Date \| null | Value selected by input-dt. |
| `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. |
| `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. |
| `disable` | Date[] | List of dates that cannot be selected. |
| `hours` | number[] \| null | Options for the hour. |
| `minutes` | number[] \| null | Options for the minute. |
| `seconds` | number[] \| null | Options for the second. |
| `unit` | string | Minimum unit of datetime. `day` - date picker only, or `hour`, `minute`, `second`(default). |
| `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. |
| `firstDay` | number \| null | First day of week. By default, it will be the default locale of the web browser. |
| `background` | boolean | See the `background` attribute. |
| `autoclose` | boolean | See the `autoclose` attribute. |
| `modal` | Element | **Read-only**. A property for direct access to the elements of a modal. |
| `format` | (date: Date) => string | **Write-only**. It is possible to change the display of `input-dt` or `input-dt-display`. If used, the format attribute becomes invalid. |
| `formatYear` | (date: number) => string | **Write-only**. It is possible to change the text portion displaying the year and the year options. |
| `formatMonth` | (date: number) => string | **Write-only**. It is possible to change the text portion displaying the month and the month options. |
| `formatWeek` | (value: number) => string | **Write-only**. The display text of week headings in the calendar can be changed. |
| `formatDay` | (date: Date) => string | **Write-only**. The text of each day of the calendar can be changed. |
| `formatHour` | (value: number) => string | **Write-only**. The text of the hour options can be changed. |
| `formatMinute` | (value: number) => string | **Write-only**. The text of the minute options can be changed. |
| `formatSecond` | (value: number) => string | **Write-only**. The text of the second options can be changed. |
| `renderYear` | (value: number, flags: Flags) => Element | **Write-only**. The entire element of the year option can be replaced. |
| `renderMonth` | (value: number, flags: Flags) => Element | **Write-only**. The entire element of the month option can be replaced. |
| `renderWeek` | (value: number) => Element | **Write-only**. It is possible to change the elements of the calendar week headings in their entirety. |
| `renderDate` | (date: Date, flags: Flags) => Element | **Write-only**. It is possible to change the elements of each day of the calendar in its entirety. |
| `renderHour` | (value: number, flags: Flags) => Element | **Write-only**. The entire element of the hour option can be replaced. |
| `renderMinute` | (value: number, flags: Flags) => Element | **Write-only**. The entire element of the minute option can be replaced. |
| `renderSecond` | (value: number, flags: Flags) => Element | **Write-only**. The entire element of the second option can be replaced. |
The Flags type has the following properties
- `isSelected` - This value is the currently selected.
- `isWeekend` - renderDate only. It is the weekend as determined by the current locale.
- `isInside` - renderDate only. This date is inside the currently selected years and months.
- `isOutside` - renderDate only. This date is outside the currently selected years and months.
- `isDisabled` - renderDate only. This date has been disabled.
These properties can be used to create a new custom element as follows.
```js
import { InputDt } from 'input-dt'
export class InputDtJa extends InputDt {
constructor() {
super()
this.locales = 'ja'
}
}
window.customElements.define('input-dt-ja', InputDtJa)
```
# Events
The `input-dt` element receives an `input` event each time a date/time is selected.
At the same time, input-dt also sends an `input` event to input elements with `input-dt`.