Date and time picker

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. The following samples show these input controls.

The “Disabled” checkbox can be used to toggle the above controls and inspect their disabled appearance and behaviour.

Date selection

The basic date selection is used with <input type="date"> and allows the selection of a date. The field value (shown next to the input field) is in the ISO 8601 format “YYYY-MM-DD”, e.g. “2019-09-30”.

Set today

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

The date and time format and labels texts are automatically set by the browser language. To override, set the localeCode option, the following example is set to Icelandic (is-IS):

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. “2019-09”.

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. “2019-W40”.

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

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.

Submit date

Disabled

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

Set now

By setting the step 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.

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)

Disabled

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

Set now

Disabled