TimePicker plugin

Version 2.1.0

HTML defines a number of input control elements for date- and time-related input. They provide a basic input method but are not very convenient or usable and highly depend on the browser implementation. To achieve a more modern and cross-platform consistent look and provide better usability, these controls are reimplemented by Frontfire. The time picker is highly flexible and can allow input of reduced time components or highlighting of dates.

This plugin is only available in the Complete bundle.

This plugin depends on the plugins: draggable, dropdown, repeatButton (form)

Date selection

Disable time pickers

Hide time pickers

The basic date selection is used with <input type="date"> elements and allows the selection of a date.

The colours of the time picker dropdown can be customised with the CSS variables that start with “--timepicker-”.

Each day or month item can be customised with a function that is called with the item and the date as arguments. The function can be specified in the options or later with the monthFormatter or dayFormatter properties. In the example below, all Sundays are marked in red colour.

→

Month selection

The selection can be limited to months instead of full dates with <input type="month">. The field value is in the ISO 8601 format “YYYY-MM”, e.g. “2022-12”.

→

Week selection

The selection can be limited to weeks instead of full dates with <input type="week">. The field value is in the ISO 8601 format “YYYY-‘W’WW”, e.g. “2022-W52”.

→

Time selection

The basic time selection is used with <input type="time"> and allows the selection of a time of day, with hours and minutes. The field value is in the ISO 8601 format “hh:mm”, e.g. “21:42”.

→

With seconds

By setting the step HTML attribute to a value of less than 60 (seconds), the control also enables the input of seconds: <input type="time" step="1">. You should only choose steps that align with full increments on the higher level, e.g. 5/10/15/30 seconds that align at a full minute, or 5/10/15/30 minutes (300/600/900/1800 seconds) that align at a full hour. This is because each time component can be adjusted individually and the step only applies to the smallest component.

exclamation-triangle-fill min, max and step attributes are not yet implemented (except for activating of seconds input).

→ (allows every second)

→ (allows every 15 seconds)

→ (allows every 5 minutes)

Combined date and time selection

A single field can contain a full timestamp consisting of a date and time of day: <input type="datetime-local">. This does not support time zones and can only represent a local timestamp (not UTC). The field value is in the ISO 8601 format “YYYY-MM-DD‘T’hh:mm”, e.g. “2019-09-30T21:42”.

→

Required input

If the input is not optional and a valid date is required, the required attribute can be used as usual.

exclamation-triangle-fill The required attribute is not fully functional for now. It hides the “clear” button in the dropdown but is itself removed until a proper form validation is in place, because there is no way to show a browser-generated message on the original hidden and the new readonly field.

Localisation

The date and time format and label texts are automatically set by the browser language. To override, set the localeCode option, the following example is set to Swedish in Sweden (sv-SE):

If the browser does not support that locale or no locale code is specified, the language is determined by the browser setting. All time formats are provided by the browser. Currently, the following languages are supported for label texts. Specifying a different language will return English names.

cs: Czech
da: Danish
de: German
en: English
es: Spanish
fi: Finnish
fr: French
hu: Hungarian
is: Icelandic
it: Italian
nl: Dutch
no: Norwegian
pt: Portuguese
ro: Romanian
sk: Slovak
sl: Slovene
sv: Swedish

Events

The visible element is not the original HTML input element that was in the document. To make it easier to use certain events with the UI element, they are forwarded to the original <input> element using the Frontfire.forwardUIEvents() method.

The change event is already managed by other actions and considered in both directions.

The dropdown event close is passed through. The additional open event is triggered when the selection dropdown is opened.

Events:

The original element’s focus() method is overwritten to focus the visible element instead.

Options

The following options are available:

Name	Type	Description	Default
`dayFormatter`	Function	A function that changes the format of a day item.	None
`localeCode`	String	The locale used for formats and text translations.	Auto
`monthFormatter`	Function	A function that changes the format of a month item.	None
`isoFormat`	Boolean	Indicates whether the ISO 8601 date and time format is used instead of the local format.	false
`isoFormatSeparator`	String	The separator between date and time for ISO 8601 format. Can be set to "T".	", "

Plugin properties

This plugin provides properties to access the input field.

dayFormatter

dayFormatter → Function

Gets or sets a function that changes the format of a day item. The callback function gets two arguments:

The HTML element that represents the specific day.
The Date of the day.

F("#timepicker").timePicker.dayFormatter = (item, date) => { if (date.getDay() === 0) item.classList.add("weekend"); };

monthFormatter

monthFormatter → Function

Gets or sets a function that changes the format of a month item. The callback function gets two arguments:

The HTML element that represents the specific month.
The Date of the first day of the month.

F("#timepicker").timePicker.monthFormatter = (item, date) => { if (date.getMonth() === 0) item.classList.add("holiday"); };

Plugin events

This plugin triggers events for the input field.

close

Triggered when the selection dropdown is closed.

open

Triggered when the selection dropdown is opened.