TimePicker - Form Widgets Documentation

Usage

HTML (Auto-init)

HTML

<input type="text" class="fw-timepicker" id="myTime">

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

HTML with Data Attributes

HTML

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

JavaScript Initialization

JavaScript

FormWidgets.init('#myTime', 'TimePicker', {
    format: 'HH:mm',
    showSeconds: false,
    showPattern: true
});

Options

Option	Type	Default	Description
format	string	'HH:mm:ss'	Time format string. Use `HH:mm:ss` for 24-hour with seconds, or `HH:mm` without seconds.
showSeconds	boolean	true	When `false`, the seconds selector is hidden and the format defaults to `HH:mm`.
showPattern	boolean	true	When `true`, the expected time format is shown as a placeholder (e.g. `HH:mm:ss`).
icon	string	'ult">false	When `true`, the field is required and shows a validation error when empty.

Data Attributes

ed="true"

Data Attribute	Equivalent Option	Example
data-show-seconds	`showSeconds`	`data-show-seconds="false"`
data-show-pattern	`showPattern`	`data-show-pattern="true"`
data-icon	`icon`	`data-icon="clock"`

Keyboard Navigation

Enter / ↓Open the time picker popup

EscClose the picker and return focus to the input

TabNavigate through hours, minutes, seconds selectors and the Apply button

↑ ↓Increment or decrement values in focused selector

EnterApply the selected time and close the picker

Manual Input

Users can type a time directly (e.g. 14:30 or 09:15:00). The widget validates and formats on blur.

Features

Dropdown Selectors

Separate scrollable selectors for hours, minutes, and seconds.

Manual Input

Type times directly â€” validated and formatted on blur.

Optional Seconds

Show or hide the seconds selector as needed.

Smart Positioning

Popup positions above or below based on available screen space.

Notes

Format and showSeconds

When you set showSeconds: false, also set format: 'HH:mm' to ensure the stored value matches the display. If they conflict, the format string takes precedence.