Struct TimeRangeFieldProps 

pub struct TimeRangeFieldProps {
    pub bind: TimeRangeFieldBind,
    pub appearance: TimeRangeFieldAppearance,
    pub class: MaybeProp<String>,
}

Props for the TimeRangeField component.

Segmented start/end time input bound to [DateTimeRange].

TimeRangeField renders two TimeField segment groups separated by an en-dash. See the crate README for range control selection.

When to use

• Same-day shift or hours windows entered by keyboard
• Compact toolbar filters for time-of-day spans

Usage

1. Bind Option<DateTimeRange> through TimeRangeFieldBind.
2. Set TimeRangeFieldAppearance for 12-hour or 24-hour segments.
3. Share [DatetimeLocale] with sibling pickers on the page.

Best Practices

Do’s

• Use a shared reference date on both endpoints when the range never crosses midnight.

Don’ts

• Do not use for multi-day spans — use DateRangeField or DateTimeRangeField.

Examples

Time range segments

Default 12-hour start/end segments with 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-field-preview">
        <PickerPreviewKnobs />
        <TimeRangeField bind=value />
        <div data-testid="time-range-field-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 format

Hour/minute segments in 24-hour layout.

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

Optional Props

• bind: impl Into<TimeRangeFieldBind>
  • Value binding for the segmented time range input.
• appearance: impl Into<TimeRangeFieldAppearance>
  • Format, reference date, and disabled state.
• class: impl Into<MaybeProp<String>>
  • Optional CSS class on the layout wrapper.

Fields

bind: TimeRangeFieldBind

Value binding for the segmented time range input.

appearance: TimeRangeFieldAppearance

Format, reference date, and disabled state.

class: MaybeProp<String>

Optional CSS class on the layout wrapper.

Implementations

impl TimeRangeFieldProps

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

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

Trait Implementations

impl Props for TimeRangeFieldProps

type Builder = TimeRangeFieldPropsBuilder

fn builder() -> Self::Builder