Struct TimeRangePickerProps 

pub struct TimeRangePickerProps {
    pub bind: TimeRangePickerBind,
    pub appearance: TimeRangePickerAppearance,
    pub class: MaybeProp<String>,
}

Props for the TimeRangePicker component.

Time range field with side-by-side start/end TimePicker panels, bound to [DateTimeRange].

See the crate README for range control selection.

When to use

• Business hours, shift windows, or same-day time spans
• Forms where users pick start/end times with scroll columns instead of typing

Usage

1. Bind Option<DateTimeRange> through TimeRangePickerBind.
2. Set TimeRangePickerAppearance for 12/24-hour format and reference date.
3. Enable [DatePickerFeatures::RANGE_PICKERS] in docs — no runtime license check.

Best Practices

Do’s

• Anchor times to a shared reference_date when the range is always same-day.

Don’ts

• Do not mix timezone binds — keep start and end in the same display zone from [DatetimeLocale].

Examples

Time window

Default 12-hour range field with dual time pickers and bind readout.

use crate::DateTimeRange;
use orbital_base_components::ToUnixSeconds;
use crate::preview::{PickerPreviewExample, PickerPreviewKnobs};
let value = RwSignal::new(None::<DateTimeRange>);
view! {
    <PickerPreviewExample data_testid="time-range-picker-preview">
        <PickerPreviewKnobs />
        <TimeRangePicker bind=value />
        <div data-testid="time-range-picker-preview-VALUE">{move || match value.get() {
            Some(range) => [range.start.to_unix_seconds().to_string(), range.end.to_unix_seconds().to_string()].join(","),
            None => "none".to_string(),
        }}</div>
    </PickerPreviewExample>
}

24-hour panels

Scroll-column pickers in 24-hour format.

use crate::DateTimeRange;
use crate::preview::PickerPreviewExample;
let value = RwSignal::new(None::<DateTimeRange>);
view! {
    <PickerPreviewExample data_testid="TRP-02">
        <TimeRangePicker bind=value appearance=TimeRangePickerAppearance::time24() />
    </PickerPreviewExample>
}

Optional Props

• bind: impl Into<TimeRangePickerBind>
  • Value binding for the combined time range pickers.
• appearance: impl Into<TimeRangePickerAppearance>
  • Time format, reference date, and disabled state.
• class: impl Into<MaybeProp<String>>
  • Optional CSS class on the layout wrapper.

Fields

bind: TimeRangePickerBind

Value binding for the combined time range pickers.

appearance: TimeRangePickerAppearance

Time format, reference date, and disabled state.

class: MaybeProp<String>

Optional CSS class on the layout wrapper.

Implementations

impl TimeRangePickerProps

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

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

Trait Implementations

impl Props for TimeRangePickerProps

type Builder = TimeRangePickerPropsBuilder

fn builder() -> Self::Builder