input-dt

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.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/input-dt@0.1.0/input-dt-min.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/input-dt@0.1.0/input-dt-min.js"></script>

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.

<label for="calender">Datetime:</label>
<input-dt
  value="2024-03-10"
  min="2024-01-01"
  max="2026-12-31"
  disable="2024-08-31,2024-12-31"
  hours="0,3,6,9,12,15,18,21"
  minutes="0,10,20,30,40,50"
  seconds="0,10,20,30,40,50"
  unit="seconds"
  locales="ja"
  first-day="0"
  background="true"
  auto-close="true"
>
  <input type="text" name="calender" input-dt>
</input-dt>

More examples

See the examples directory for examples in HTML only, Bootstrap, Vue.js, React, Jito, and PHP.

Import for Node.js

npm i input-dt

Import js and css at entry point.

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.

.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.

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.