Skip to content

Time Clock

The Time Clock component lets the user select a time without any input or popper / modal.

Basic usage

123456789101112
Press Enter to start editing

Uncontrolled vs. Controlled

The component can be uncontrolled or controlled.

Uncontrolled clock

123456789101112

Controlled clock

123456789101112
Press Enter to start editing

Form props

The component can be disabled or read-only.

disabled

123456789101112

readOnly

123456789101112
Press Enter to start editing

Views

The component can contain three views: hours, minutes, and seconds. By default, only the hours and minutes views are enabled.

You can customize the enabled views using the views prop. Views will appear in the order they're included in the views array.

"hours", "minutes" and "seconds"

123456789101112

"hours"

123456789101112

"minutes" and "seconds"

051015202530354045505500
Press Enter to start editing

12h/24h format

The component uses the hour format of the locale's time setting, i.e. the 12-hour or 24-hour format.

You can force a specific format using the ampm prop.

You can find more information about 12h/24h format in the Date localization page.

Locale default behavior (enabled for enUS)

123456789101112

AM PM enabled

123456789101112

AM PM disabled

001234567891011121314151617181920212223
Press Enter to start editing

Validation

You can find the documentation in the Validation page.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.