Skip to main content

Time Picker

The Time Picker component allows users to select a time with precision and flexibility. Customize it for 12-hour or 24-hour formats, step increments, and optional range selection.

Image

Properties​

The following properties are available to configure the behavior of the component from the form editor (this is in addition to common properties).

Data​

Hour Step number/function​

Define the number of hours to increment or decrement by (e.g., steps of 1 hour, 2 hours, etc.).

Minute Step number/function​

Set how many minutes each selection should increment by.

Second Step number/function​

Specify the stepping interval for seconds.

Time Format string/function​

Define how the time is displayed (default: HH:mm).

Input Read-Only boolean​

Set whether the input is read-only to prevent mobile keyboards from appearing.

Use 12 Hours boolean​

Enable 12-hour format (AM/PM) if needed.

Allow Clear boolean​

Allow users to clear the selected time.

Show Now boolean​

Show a shortcut to quickly select the current time.

Auto Focus boolean​

Automatically focus the time picker when the page loads.

Hide Disabled Options boolean​

Hide options that are not available for selection.

Range boolean​

Enable this to allow users select a range of times instead of a single time.

Appearance​

Hide Border boolean​

Decide whether to show or hide the border around the input.

Size object​

Adjust the size of the component:

  • Small: Compact version of the picker.

  • Middle (default): Standard medium-sized picker.

  • Large: Bigger, easier-to-click version for accessibility.