Time Clock

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

Basic usage

<TimeClock />

<TimeClock />

Press Enter to start editing

Uncontrolled vs. Controlled

The component can be uncontrolled or controlled

Uncontrolled clock

Controlled clock

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

<DemoItem label="Uncontrolled clock">
  <TimeClock defaultValue={dayjs('2022-04-07T15: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-07T15:30')} disabled />
</DemoItem>
<DemoItem label="readOnly">
  <TimeClock defaultValue={dayjs('2022-04-07T15:30')} readOnly />
</DemoItem>

<DemoItem label="disabled">
  <TimeClock defaultValue={dayjs('2022-04-07T15:30')} disabled />
</DemoItem>
<DemoItem label="readOnly">
  <TimeClock defaultValue={dayjs('2022-04-07T15: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
    defaultValue={dayjs('2022-04-07T15:30:25')}
    views={['hours', 'minutes', 'seconds']}
  />
</DemoItem>
<DemoItem label={'"hours"'}>
  <TimeClock defaultValue={dayjs('2022-04-07T15:30:25')} views={['hours']} />
</DemoItem>
<DemoItem label={'"minutes" and "seconds"'}>
  <TimeClock
    defaultValue={dayjs('2022-04-07T15:30:25')}
    views={['minutes', 'seconds']}
  />
</DemoItem>

<DemoItem label={'"hours", "minutes" and "seconds"'}>
  <TimeClock
    defaultValue={dayjs('2022-04-07T15:30:25')}
    views={['hours', 'minutes', 'seconds']}
  />
</DemoItem>
<DemoItem label={'"hours"'}>
  <TimeClock defaultValue={dayjs('2022-04-07T15:30:25')} views={['hours']} />
</DemoItem>
<DemoItem label={'"minutes" and "seconds"'}>
  <TimeClock
    defaultValue={dayjs('2022-04-07T15:30:25')}
    views={['minutes', 'seconds']}
  />
</DemoItem>

Press Enter to start editing

12h/24h format

By default, 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-07T15:30')} />
</DemoItem>
<DemoItem label="AM PM enabled">
  <TimeClock defaultValue={dayjs('2022-04-07T15:30')} ampm />
</DemoItem>
<DemoItem label="AM PM disabled">
  <TimeClock defaultValue={dayjs('2022-04-07T15:30')} ampm={false} />
</DemoItem>

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

Press Enter to start editing

API

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

<TimeClock />