Time Clock

Analog clock surface for selecting time-of-day, bound to OrbitalDateTime.

TimeClock renders a two-step SVG dial: pick an hour, then pick a minute. Values anchor to appearance.reference_date or the nearest DatetimeLocale default. Clock surfaces are optional product features documented via DatePickerFeatures::CLOCK_VIEWS — there is no runtime license check.

  • Visual time selection in picker panels or dialogs
  • Alternatives to scroll-column TimePicker surfaces
  • Bind Option<OrbitalDateTime> via TimeClockBind.
  • Set appearance.ampm for 12-hour vs 24-hour dial.
  • Wrap preview examples in a native element with data-testid.
Analog clock

Default 12-hour dial with bind readout for E2E.

none
Hour and minute selection

Click or drag on the dial to pick an hour, then a minute. Minute labels show five-minute increments.

none
24-hour dial

Hour markers run 00–23 without meridiem controls.

Five-minute steps

Five-minute minute labels with coarser snap via minute_step.