Struct DigitalClockProps 

pub struct DigitalClockProps {
    pub bind: DigitalClockBind,
    pub appearance: DigitalClockAppearance,
    pub class: MaybeProp<String>,
}

Props for the DigitalClock component.

Scrollable time list for selecting time-of-day, bound to [OrbitalDateTime].

DigitalClock renders a vertical list of time slots at appearance.time_step increments. 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

• Compact time selection in picker panels
• Alternatives to scroll-column TimePicker surfaces

Usage

1. Bind Option<OrbitalDateTime> via DigitalClockBind.
2. Set appearance.time_step for list increment (default 30 minutes).
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]
• Use 15- or 30-minute steps for scheduling UIs

Don’ts

• Do not put data-testid on the component — wrap with a native element

Examples

Digital list

Scroll a 30-minute slot list; the readout above shows your selection (preview also prints unix for E2E).

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

List selection

Click a time slot to commit the bound value.

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

Fifteen-minute steps

List items appear every 15 minutes.

use leptos::prelude::*;
use orbital_base_components::OrbitalDateTime;
use crate::preview::PickerPreviewExample;
let value = RwSignal::new(None::<OrbitalDateTime>);
view! {
    <PickerPreviewExample data_testid="DC-03">
        <DigitalClock
            bind=value
            appearance=DigitalClockAppearance {
                time_step: Signal::from(15),
                ..Default::default()
            }
        />
    </PickerPreviewExample>
}

24-hour labels

Slots display 24-hour formatted labels.

use orbital_base_components::OrbitalDateTime;
use crate::preview::PickerPreviewExample;
let value = RwSignal::new(None::<OrbitalDateTime>);
view! {
    <PickerPreviewExample data_testid="DC-04">
        <DigitalClock bind=value appearance=DigitalClockAppearance::time24() />
    </PickerPreviewExample>
}

Optional Props

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

Fields

bind: DigitalClockBind

Value binding for the selected time-of-day.

appearance: DigitalClockAppearance

List step, label format, reference day, timezone, and disabled state.

class: MaybeProp<String>

Optional CSS class merged onto the layout root.

Implementations

impl DigitalClockProps

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

Create a builder for building DigitalClockProps. 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 DigitalClockProps.

Trait Implementations

impl Props for DigitalClockProps

type Builder = DigitalClockPropsBuilder

fn builder() -> Self::Builder