Time Clock

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

Basic usage

<TimeClock />

<TimeClock />

Press Enter to start editing

Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

Uncontrolled clock

Controlled clock

<DemoItem label="Uncontrolled clock">
  <TimeClock defaultValue={dayjs('2022-04-17T15:30')} />
</DemoItem>
<DemoItem label="Controlled clock">
  <TimeClock value={value} onChange={(newValue) => setValue(newValue)} />
</DemoItem>

<DemoItem label="Uncontrolled clock">
  <TimeClock defaultValue={dayjs('2022-04-17T15:30')} />
</DemoItem>
<DemoItem label="Controlled clock">
  <TimeClock value={value} onChange={(newValue) => setValue(newValue)} />
</DemoItem>

Press Enter to start editing

Form props

The component can be disabled or read-only.

disabled

readOnly

<DemoItem label="disabled">
  <TimeClock defaultValue={dayjs('2022-04-17T15:30')} disabled />
</DemoItem>
<DemoItem label="readOnly">
  <TimeClock defaultValue={dayjs('2022-04-17T15:30')} readOnly />
</DemoItem>

<DemoItem label="disabled">
  <TimeClock defaultValue={dayjs('2022-04-17T15:30')} disabled />
</DemoItem>
<DemoItem label="readOnly">
  <TimeClock defaultValue={dayjs('2022-04-17T15:30')} readOnly />
</DemoItem>

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"

"hours"

"minutes" and "seconds"

<DemoItem label={'"hours", "minutes" and "seconds"'}>
  <TimeClock views={['hours', 'minutes', 'seconds']} />
</DemoItem>
<DemoItem label={'"hours"'}>
  <TimeClock views={['hours']} />
</DemoItem>
<DemoItem label={'"minutes" and "seconds"'}>
  <TimeClock views={['minutes', 'seconds']} />
</DemoItem>

<DemoItem label={'"hours", "minutes" and "seconds"'}>
  <TimeClock views={['hours', 'minutes', 'seconds']} />
</DemoItem>
<DemoItem label={'"hours"'}>
  <TimeClock views={['hours']} />
</DemoItem>
<DemoItem label={'"minutes" and "seconds"'}>
  <TimeClock views={['minutes', 'seconds']} />
</DemoItem>

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)

AM PM enabled

AM PM disabled

<DemoItem label="Locale default behavior (enabled for enUS)">
  <TimeClock defaultValue={dayjs('2022-04-17T15:30')} />
</DemoItem>
<DemoItem label="AM PM enabled">
  <TimeClock defaultValue={dayjs('2022-04-17T15:30')} ampm />
</DemoItem>
<DemoItem label="AM PM disabled">
  <TimeClock defaultValue={dayjs('2022-04-17T15:30')} ampm={false} />
</DemoItem>

<DemoItem label="Locale default behavior (enabled for enUS)">
  <TimeClock defaultValue={dayjs('2022-04-17T15:30')} />
</DemoItem>
<DemoItem label="AM PM enabled">
  <TimeClock defaultValue={dayjs('2022-04-17T15:30')} ampm />
</DemoItem>
<DemoItem label="AM PM disabled">
  <TimeClock defaultValue={dayjs('2022-04-17T15:30')} ampm={false} />
</DemoItem>

Press Enter to start editing

Localization

See the Date format and localization and Translated components documentation pages for more details.

Validation

See the Validation documentation page for more details.

API

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

<TimeClock />