Skip to content
+

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

  • 12:00 AM
  • 12:30 AM
  • 01:00 AM
  • 01:30 AM
  • 02:00 AM
  • 02:30 AM
  • 03:00 AM
  • 03:30 AM
  • 04:00 AM
  • 04:30 AM
  • 05:00 AM
  • 05:30 AM
  • 06:00 AM
  • 06:30 AM
  • 07:00 AM
  • 07:30 AM
  • 08:00 AM
  • 08:30 AM
  • 09:00 AM
  • 09:30 AM
  • 10:00 AM
  • 10:30 AM
  • 11:00 AM
  • 11:30 AM
  • 12:00 PM
  • 12:30 PM
  • 01:00 PM
  • 01:30 PM
  • 02:00 PM
  • 02:30 PM
  • 03:00 PM
  • 03:30 PM
  • 04:00 PM
  • 04:30 PM
  • 05:00 PM
  • 05:30 PM
  • 06:00 PM
  • 06:30 PM
  • 07:00 PM
  • 07:30 PM
  • 08:00 PM
  • 08:30 PM
  • 09:00 PM
  • 09:30 PM
  • 10:00 PM
  • 10:30 PM
  • 11:00 PM
  • 11:30 PM

Multi section digital clock

  • 12
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 00
  • 05
  • 10
  • 15
  • 20
  • 25
  • 30
  • 35
  • 40
  • 45
  • 50
  • 55
  • AM
  • PM
Press Enter to start editing

Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

Uncontrolled digital clock

  • 12:00 AM
  • 12:30 AM
  • 01:00 AM
  • 01:30 AM
  • 02:00 AM
  • 02:30 AM
  • 03:00 AM
  • 03:30 AM
  • 04:00 AM
  • 04:30 AM
  • 05:00 AM
  • 05:30 AM
  • 06:00 AM
  • 06:30 AM
  • 07:00 AM
  • 07:30 AM
  • 08:00 AM
  • 08:30 AM
  • 09:00 AM
  • 09:30 AM
  • 10:00 AM
  • 10:30 AM
  • 11:00 AM
  • 11:30 AM
  • 12:00 PM
  • 12:30 PM
  • 01:00 PM
  • 01:30 PM
  • 02:00 PM
  • 02:30 PM
  • 03:00 PM
  • 03:30 PM
  • 04:00 PM
  • 04:30 PM
  • 05:00 PM
  • 05:30 PM
  • 06:00 PM
  • 06:30 PM
  • 07:00 PM
  • 07:30 PM
  • 08:00 PM
  • 08:30 PM
  • 09:00 PM
  • 09:30 PM
  • 10:00 PM
  • 10:30 PM
  • 11:00 PM
  • 11:30 PM

Controlled digital clock

  • 12:00 AM
  • 12:30 AM
  • 01:00 AM
  • 01:30 AM
  • 02:00 AM
  • 02:30 AM
  • 03:00 AM
  • 03:30 AM
  • 04:00 AM
  • 04:30 AM
  • 05:00 AM
  • 05:30 AM
  • 06:00 AM
  • 06:30 AM
  • 07:00 AM
  • 07:30 AM
  • 08:00 AM
  • 08:30 AM
  • 09:00 AM
  • 09:30 AM
  • 10:00 AM
  • 10:30 AM
  • 11:00 AM
  • 11:30 AM
  • 12:00 PM
  • 12:30 PM
  • 01:00 PM
  • 01:30 PM
  • 02:00 PM
  • 02:30 PM
  • 03:00 PM
  • 03:30 PM
  • 04:00 PM
  • 04:30 PM
  • 05:00 PM
  • 05:30 PM
  • 06:00 PM
  • 06:30 PM
  • 07:00 PM
  • 07:30 PM
  • 08:00 PM
  • 08:30 PM
  • 09:00 PM
  • 09:30 PM
  • 10:00 PM
  • 10:30 PM
  • 11:00 PM
  • 11:30 PM

Uncontrolled multi section digital clock

  • 12
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 00
  • 05
  • 10
  • 15
  • 20
  • 25
  • 30
  • 35
  • 40
  • 45
  • 50
  • 55
  • AM
  • PM

Controlled multi section digital clock

  • 12
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 00
  • 05
  • 10
  • 15
  • 20
  • 25
  • 30
  • 35
  • 40
  • 45
  • 50
  • 55
  • AM
  • PM

Form props

The components can be disabled or read-only.

Digital clock disabled

  • 12:00 AM
  • 12:30 AM
  • 01:00 AM
  • 01:30 AM
  • 02:00 AM
  • 02:30 AM
  • 03:00 AM
  • 03:30 AM
  • 04:00 AM
  • 04:30 AM
  • 05:00 AM
  • 05:30 AM
  • 06:00 AM
  • 06:30 AM
  • 07:00 AM
  • 07:30 AM
  • 08:00 AM
  • 08:30 AM
  • 09:00 AM
  • 09:30 AM
  • 10:00 AM
  • 10:30 AM
  • 11:00 AM
  • 11:30 AM
  • 12:00 PM
  • 12:30 PM
  • 01:00 PM
  • 01:30 PM
  • 02:00 PM
  • 02:30 PM
  • 03:00 PM
  • 03:30 PM
  • 04:00 PM
  • 04:30 PM
  • 05:00 PM
  • 05:30 PM
  • 06:00 PM
  • 06:30 PM
  • 07:00 PM
  • 07:30 PM
  • 08:00 PM
  • 08:30 PM
  • 09:00 PM
  • 09:30 PM
  • 10:00 PM
  • 10:30 PM
  • 11:00 PM
  • 11:30 PM

Digital clock readOnly

  • 12:00 AM
  • 12:30 AM
  • 01:00 AM
  • 01:30 AM
  • 02:00 AM
  • 02:30 AM
  • 03:00 AM
  • 03:30 AM
  • 04:00 AM
  • 04:30 AM
  • 05:00 AM
  • 05:30 AM
  • 06:00 AM
  • 06:30 AM
  • 07:00 AM
  • 07:30 AM
  • 08:00 AM
  • 08:30 AM
  • 09:00 AM
  • 09:30 AM
  • 10:00 AM
  • 10:30 AM
  • 11:00 AM
  • 11:30 AM
  • 12:00 PM
  • 12:30 PM
  • 01:00 PM
  • 01:30 PM
  • 02:00 PM
  • 02:30 PM
  • 03:00 PM
  • 03:30 PM
  • 04:00 PM
  • 04:30 PM
  • 05:00 PM
  • 05:30 PM
  • 06:00 PM
  • 06:30 PM
  • 07:00 PM
  • 07:30 PM
  • 08:00 PM
  • 08:30 PM
  • 09:00 PM
  • 09:30 PM
  • 10:00 PM
  • 10:30 PM
  • 11:00 PM
  • 11:30 PM

Multi section digital clock disabled

  • 12
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 00
  • 05
  • 10
  • 15
  • 20
  • 25
  • 30
  • 35
  • 40
  • 45
  • 50
  • 55
  • AM
  • PM

Multi section digital clock readOnly

  • 12
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 00
  • 05
  • 10
  • 15
  • 20
  • 25
  • 30
  • 35
  • 40
  • 45
  • 50
  • 55
  • AM
  • PM

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"

  • 12
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 00
  • 05
  • 10
  • 15
  • 20
  • 25
  • 30
  • 35
  • 40
  • 45
  • 50
  • 55
  • 00
  • 05
  • 10
  • 15
  • 20
  • 25
  • 30
  • 35
  • 40
  • 45
  • 50
  • 55
  • AM
  • PM

"hours"

  • 12
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • AM
  • PM

"minutes" and "seconds"

  • 00
  • 05
  • 10
  • 15
  • 20
  • 25
  • 30
  • 35
  • 40
  • 45
  • 50
  • 55
  • 00
  • 05
  • 10
  • 15
  • 20
  • 25
  • 30
  • 35
  • 40
  • 45
  • 50
  • 55
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)

  • 12:00 AM
  • 12:30 AM
  • 01:00 AM
  • 01:30 AM
  • 02:00 AM
  • 02:30 AM
  • 03:00 AM
  • 03:30 AM
  • 04:00 AM
  • 04:30 AM
  • 05:00 AM
  • 05:30 AM
  • 06:00 AM
  • 06:30 AM
  • 07:00 AM
  • 07:30 AM
  • 08:00 AM
  • 08:30 AM
  • 09:00 AM
  • 09:30 AM
  • 10:00 AM
  • 10:30 AM
  • 11:00 AM
  • 11:30 AM
  • 12:00 PM
  • 12:30 PM
  • 01:00 PM
  • 01:30 PM
  • 02:00 PM
  • 02:30 PM
  • 03:00 PM
  • 03:30 PM
  • 04:00 PM
  • 04:30 PM
  • 05:00 PM
  • 05:30 PM
  • 06:00 PM
  • 06:30 PM
  • 07:00 PM
  • 07:30 PM
  • 08:00 PM
  • 08:30 PM
  • 09:00 PM
  • 09:30 PM
  • 10:00 PM
  • 10:30 PM
  • 11:00 PM
  • 11:30 PM
  • 12
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 00
  • 05
  • 10
  • 15
  • 20
  • 25
  • 30
  • 35
  • 40
  • 45
  • 50
  • 55
  • AM
  • PM

AM PM enabled

  • 12:00 AM
  • 12:30 AM
  • 01:00 AM
  • 01:30 AM
  • 02:00 AM
  • 02:30 AM
  • 03:00 AM
  • 03:30 AM
  • 04:00 AM
  • 04:30 AM
  • 05:00 AM
  • 05:30 AM
  • 06:00 AM
  • 06:30 AM
  • 07:00 AM
  • 07:30 AM
  • 08:00 AM
  • 08:30 AM
  • 09:00 AM
  • 09:30 AM
  • 10:00 AM
  • 10:30 AM
  • 11:00 AM
  • 11:30 AM
  • 12:00 PM
  • 12:30 PM
  • 01:00 PM
  • 01:30 PM
  • 02:00 PM
  • 02:30 PM
  • 03:00 PM
  • 03:30 PM
  • 04:00 PM
  • 04:30 PM
  • 05:00 PM
  • 05:30 PM
  • 06:00 PM
  • 06:30 PM
  • 07:00 PM
  • 07:30 PM
  • 08:00 PM
  • 08:30 PM
  • 09:00 PM
  • 09:30 PM
  • 10:00 PM
  • 10:30 PM
  • 11:00 PM
  • 11:30 PM
  • 12
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 00
  • 05
  • 10
  • 15
  • 20
  • 25
  • 30
  • 35
  • 40
  • 45
  • 50
  • 55
  • AM
  • PM

AM PM disabled

  • 00:00
  • 00:30
  • 01:00
  • 01:30
  • 02:00
  • 02:30
  • 03:00
  • 03:30
  • 04:00
  • 04:30
  • 05:00
  • 05:30
  • 06:00
  • 06:30
  • 07:00
  • 07:30
  • 08:00
  • 08:30
  • 09:00
  • 09:30
  • 10:00
  • 10:30
  • 11:00
  • 11:30
  • 12:00
  • 12:30
  • 13:00
  • 13:30
  • 14:00
  • 14:30
  • 15:00
  • 15:30
  • 16:00
  • 16:30
  • 17:00
  • 17:30
  • 18:00
  • 18:30
  • 19:00
  • 19:30
  • 20:00
  • 20:30
  • 21:00
  • 21:30
  • 22:00
  • 22:30
  • 23:00
  • 23:30
  • 00
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 00
  • 05
  • 10
  • 15
  • 20
  • 25
  • 30
  • 35
  • 40
  • 45
  • 50
  • 55

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

  • 12:00 AM
  • 01:00 AM
  • 02:00 AM
  • 03:00 AM
  • 04:00 AM
  • 05:00 AM
  • 06:00 AM
  • 07:00 AM
  • 08:00 AM
  • 09:00 AM
  • 10:00 AM
  • 11:00 AM
  • 12:00 PM
  • 01:00 PM
  • 02:00 PM
  • 03:00 PM
  • 04:00 PM
  • 05:00 PM
  • 06:00 PM
  • 07:00 PM
  • 08:00 PM
  • 09:00 PM
  • 10:00 PM
  • 11:00 PM

Multi section digital clock

  • 12
  • 02
  • 04
  • 06
  • 08
  • 10
  • 00
  • 15
  • 30
  • 45
  • 00
  • 10
  • 20
  • 30
  • 40
  • 50
  • AM
  • PM
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

  • 09:00 AM
  • 10:00 AM
  • 11:00 AM
  • 12:00 PM
  • 01:00 PM
  • 02:00 PM
  • 03:00 PM
  • 04:00 PM
  • 05:00 PM
  • 06:00 PM
  • 07:00 PM
  • 08:00 PM
  • 09:00 PM
  • 10:00 PM
  • 11:00 PM

Multi section digital clock

  • 09
  • 10
  • 11
  • 12
  • 13
  • 00
  • 05
  • 10
  • 15
  • 20
  • 25
  • 30
  • 35
  • 40
  • 45
  • 50
  • 55
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.