Struct TimeClockProps 

pub struct TimeClockProps {
    pub bind: TimeClockBind,
    pub appearance: TimeClockAppearance,
    pub class: MaybeProp<String>,
}

Props for the TimeClock component.

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.

When to use

• Visual time selection in picker panels or dialogs
• Alternatives to scroll-column TimePicker surfaces

Usage

1. Bind Option<OrbitalDateTime> via TimeClockBind.
2. Set appearance.ampm for 12-hour vs 24-hour dial.
3. Wrap preview examples in a native element with data-testid.

Best Practices

Do’s

• Enable clock views in product docs with [DatePickerFeatures::CLOCK_VIEWS]
• Provide reference_date when the anchor day differs from locale defaults

Don’ts

• Do not use for date selection — prefer DateCalendar
• Do not put data-testid on the component — wrap with a native element

Examples

Analog clock

Default 12-hour dial with bind readout for E2E.

use orbital_base_components::{OrbitalDateTime, ToUnixSeconds};
use crate::preview::{PickerPreviewExample, PickerPreviewKnobs};
let value = RwSignal::new(None::<OrbitalDateTime>);
view! {
    <PickerPreviewExample data_testid="time-clock-preview">
        <PickerPreviewKnobs />
        <TimeClock bind=value />
        <div data-testid="time-clock-preview-VALUE">{move || value.get().map(|v| v.to_unix_seconds().to_string()).unwrap_or_else(|| "none".to_string())}</div>
    </PickerPreviewExample>
}

Hour and minute selection

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

use orbital_base_components::{OrbitalDateTime, ToUnixSeconds};
use crate::preview::PickerPreviewExample;
let value = RwSignal::new(None::<OrbitalDateTime>);
view! {
    <PickerPreviewExample data_testid="TC-02">
        <TimeClock bind=value />
        <div data-testid="TC-02-VALUE">{move || value.get().map(|v| v.to_unix_seconds().to_string()).unwrap_or_else(|| "none".to_string())}</div>
    </PickerPreviewExample>
}

24-hour dial

Hour markers run 00–23 without meridiem controls.

use orbital_base_components::OrbitalDateTime;
use crate::preview::PickerPreviewExample;
let value = RwSignal::new(None::<OrbitalDateTime>);
view! {
    <PickerPreviewExample data_testid="TC-03">
        <TimeClock bind=value appearance=TimeClockAppearance::time24() />
    </PickerPreviewExample>
}

Five-minute steps

Five-minute minute labels with coarser snap via minute_step.

use leptos::prelude::*;
use orbital_base_components::OrbitalDateTime;
use crate::preview::PickerPreviewExample;
let value = RwSignal::new(None::<OrbitalDateTime>);
view! {
    <PickerPreviewExample data_testid="TC-04">
        <TimeClock
            bind=value
            appearance=TimeClockAppearance {
                minute_step: Signal::from(5),
                ..Default::default()
            }
        />
    </PickerPreviewExample>
}

Optional Props

• bind: impl Into<TimeClockBind>
  • Value binding for the selected time-of-day.
• appearance: impl Into<TimeClockAppearance>
  • Dial format, minute step, reference day, timezone, and disabled state.
• class: impl Into<MaybeProp<String>>
  • Optional CSS class merged onto the layout root.

Fields

bind: TimeClockBind

Value binding for the selected time-of-day.

appearance: TimeClockAppearance

Dial format, minute step, reference day, timezone, and disabled state.

class: MaybeProp<String>

Optional CSS class merged onto the layout root.

Implementations

impl TimeClockProps

pub fn builder() -> TimeClockPropsBuilder<((), (), ())>

Create a builder for building TimeClockProps. On the builder, call .bind(...)(optional), .appearance(...)(optional), .class(...)(optional) to set the values of the fields. Finally, call .build() to create the instance of TimeClockProps.

Trait Implementations

impl Props for TimeClockProps

type Builder = TimeClockPropsBuilder

fn builder() -> Self::Builder