DateTimePicker - Form Widgets Documentation

Usage

HTML (Auto-init)

HTML

<input type="text" class="fw-datetime" id="myDateTime">

<script>
  FormWidgets.autoInit();
</script>

HTML with Data Attributes

HTML

<input type="text" class="fw-datetime"
       data-show-seconds="false"
       data-show-pattern="true">

JavaScript Initialization

JavaScript

FormWidgets.init('#myDateTime', 'DateTimePicker', {
    displayFormat: 'DD/MM/YYYY HH:mm',
    timeFormat: 'HH:mm',
    showSeconds: false,
    showPattern: true
});

Options

Option	Type	Default	Description
dateFormat	string	'YYYY-MM-DD'	Internal date component format.
timeFormat	string	'HH:mm:ss'	Time component format. Use `HH:mm` to hide seconds.
displayFormat	string	'YYYY-MM-DD HH:mm:ss'	Combined display format shown to the user. Should match `dateFormat + ' ' + timeFormat`.
showSeconds	boolean	true	When `false`, hides the seconds selector in the time part of the popup.
showPattern	boolean	true	Show the combined format as a placeholder when empty (e.g. `YYYY-MM-DD HH:mm:ss`).
icon	string	'calendarPlus'	Name of the SVG icon to use from the internal icon set.
required	boolean	false	Marks the field as required with validation.

Data Attributes

Data Attribute	Equivalent Option	Example
data-show-seconds	`showSeconds`	`data-show-seconds="false"`
data-show-pattern	`showPattern`	`data-show-pattern="true"`
data-display-format	`displayFormat`	`data-display-format="DD/MM/YYYY HH:mm"`
data-required	`required`	`data-required="true"`

Keyboard Navigation

Enter / ↓Open the date/time picker popup

EscClose the picker

← →Navigate calendar by day

↑ ↓Navigate calendar by week (in calendar) or change time values (in time selectors)

TabMove through month/year dropdowns, calendar, time selectors, and action buttons

EnterSelect date or apply time and close the popup

Features

Combined Picker

Full calendar + time selectors in one popup â€” one field, one click.

Manual Input

Type date and time directly in the expected format.

Optional Seconds

Show or hide the seconds selector.

Custom Formats

Any combination of date and time format components.