Time picker - Flex Demo

12/24-hour clocks, appointment slots and ordered time ranges.

Hour cycles and precision

Choose a 12-hour or 24-hour clock independently from the stored time. Seconds are optional.

Time · 24h

Time · 12h

Time with seconds

Intervals, allowed times and empty availability

An interval controls menu choices; allowedTimes enforces an exact whitelist in validation too.

Five-minute menu

Options from 09:00 to 18:00, every five minutes.

Only appointment times

09:15, 11:40 and 15:10 are the only allowed values.

No available hours

Empty state; no time can be selected.

Typing, clearing and timezone labels

Guided numeric typing is optional. A timezone label describes the local clock and does not convert its stored value.

Guided time entry

Numeric time segments; ArrowUp/ArrowDown adjust the selected segment.

Clearable time

Use × to clear this optional value.

Clock with timezone label

Europe/Warsaw

The clock remains a local HH:mm value.

Time ranges

Intervals belong to one day. For overnight bookings, use a date range with endpoint times instead.

Opening hours

Opening hours · 12h

Only approved endpoints

Validation: required, bounds and whitelist

Run validation on one example at a time and compare the rejected and accepted values.

Required time^*

An empty value is rejected.

Checking…

Business-hour limit

08:59 is below the configured minimum.

Checking…

Whitelist validation

12:00 cannot be accepted.

Checking…

Validation: malformed clocks and range endpoints

Invalid clock values and reversed or incomplete ranges produce field-level errors.

Malformed time

Hours cannot exceed 23 and minutes cannot exceed 59.

Checking…

Reversed time range

Same-day end must not precede start.

Checking…

Incomplete time range

Both endpoints are needed once a range has started.

Checking…

Sizes and variants

The clock shares FLEX input sizes and visual variants.

Small · primary

Medium · secondary

Large · flat

Direction and locked states

Compare right-to-left input with read-only and disabled clocks.

Arabic · RTL

Read-only time

Disabled time

Information

Developer: FLEX
Category: Date & time
Website