Loading...
See the new new component docs (under construction) for V19 and TypeScript samples.

Time Picker

Time Picker

A high quality web component for selecting a time

Features

Configurable value resolution

You can choose how an hour is split evenly for the options displayed for the user, e.g. show every even 15 minutes for each time. You can configure the time resolution up to a millisecond level. If the resolution is higher than 15 minutes, the value selection drop-down is hidden automatically to avoid showing an impractical number of choices. The time formatting is also adjusted based on this configuration.

ISO 8601 and custom formatting

By default the time value is ISO 8601 formatted either hh:mm, hh:mm:ss or hh:mm:ss.fff depending on the time resolution you choose. You can also define a custom format.

Validations

You can mark the field as required and validate against a regular expression pattern. Also, you can define a custom validator by extending the element and providing your validation method.

Customizable styles

The component supports both Lumo and Material themes. For the most straightforward styling, you can use Lumo and Material CSS custom properties. For more fine-grained styling, the Time Picker input field has the same stylable parts as Text Field. The time selection panel should be styled as Combo Box.