Digital Clock

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

Description

There are two component versions for different cases. The DigitalClock handles selection of a single time instance in one step, just like a select component. The MultiSectionDigitalClock allows selecting time using separate sections for separate views.

The DigitalClock is more appropriate when there is a limited number of time options needed, while the MultiSectionDigitalClock is suited for cases when a more granular time selection is needed.

Basic usage

Digital clock

Multi section digital clock

<DemoItem label="Digital clock">
  <DigitalClock />
</DemoItem>
<DemoItem label="Multi section digital clock">
  <MultiSectionDigitalClock />
</DemoItem>

<DemoItem label="Digital clock">
  <DigitalClock />
</DemoItem>
<DemoItem label="Multi section digital clock">
  <MultiSectionDigitalClock />
</DemoItem>

Press Enter to start editing

Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

Uncontrolled digital clock

Controlled digital clock

Uncontrolled multi section digital clock

Controlled multi section digital clock

Form props

The components can be disabled or read-only.

Digital clock disabled

Digital clock readOnly

Multi section digital clock disabled

Multi section digital clock readOnly

Views

The MultiSectionDigitalClock 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"'}>
  <MultiSectionDigitalClock views={['hours', 'minutes', 'seconds']} />
</DemoItem>
<DemoItem label={'"hours"'}>
  <MultiSectionDigitalClock views={['hours']} />
</DemoItem>
<DemoItem label={'"minutes" and "seconds"'}>
  <MultiSectionDigitalClock views={['minutes', 'seconds']} />
</DemoItem>

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

Press Enter to start editing

12h/24h format

The components use 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

Time steps

By default, the components list the time options in the following way:

DigitalClock in 30 minutes intervals;
MultiSectionDigitalClock component in 5 unit (minutes or seconds) intervals;

You can set the desired interval using the timeStep and timeSteps props. The prop accepts:

The DigitalClock component accepts a number value timeStep prop;
The MultiSectionDigitalClock component accepts a timeSteps prop with number values for hours, minutes, or seconds units;

Digital clock

Multi section digital clock

<DemoItem label="Digital clock">
  <DigitalClock timeStep={60} />
</DemoItem>
<DemoItem label="Multi section digital clock">
  <MultiSectionDigitalClock
    timeSteps={{ hours: 2, minutes: 15, seconds: 10 }}
    views={['hours', 'minutes', 'seconds']}
  />
</DemoItem>

<DemoItem label="Digital clock">
  <DigitalClock timeStep={60} />
</DemoItem>
<DemoItem label="Multi section digital clock">
  <MultiSectionDigitalClock
    timeSteps={{ hours: 2, minutes: 15, seconds: 10 }}
    views={['hours', 'minutes', 'seconds']}
  />
</DemoItem>

Press Enter to start editing

Skip rendering disabled options

With the skipDisabled prop, the components don't render options that are not available to the user (e.g. through minTime, maxTime, shouldDisabledTime etc.).

The following example combines these properties to customize which options are rendered.

The first component does not show options before 9:00 (the value of minTime).
The second one shows options between 09:00 and 13:20 thanks to shouldDisableTime.

Digital clock

Multi section digital clock

<DemoItem label="Digital clock">
  <DigitalClock
    skipDisabled
    minTime={dayjs('2022-04-17T09:00')}
    timeStep={60}
  />
</DemoItem>
<DemoItem label="Multi section digital clock">
  <MultiSectionDigitalClock
    skipDisabled
    shouldDisableTime={shouldDisableTime}
    ampm={false}
  />
</DemoItem>

<DemoItem label="Digital clock">
  <DigitalClock
    skipDisabled
    minTime={dayjs('2022-04-17T09:00')}
    timeStep={60}
  />
</DemoItem>
<DemoItem label="Multi section digital clock">
  <MultiSectionDigitalClock
    skipDisabled
    shouldDisableTime={shouldDisableTime}
    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.