Struct DateTimeRangePickerProps 

pub struct DateTimeRangePickerProps {
    pub bind: DateTimeRangePickerBind,
    pub appearance: DateTimeRangePickerAppearance,
    pub class: MaybeProp<String>,
}

Props for the DateTimeRangePicker component.

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

See the crate README for range control selection.

When to use

• Meeting slot booking with full date and time on both endpoints
• Maintenance windows that span partial days

Usage

1. Wrap in DatetimeLocale for timezone and format defaults.
2. Bind Option<DateTimeRange> through DateTimeRangePickerBind.
3. Tune DateTimeRangePickerAppearance for date masks and 12/24-hour time columns.

Best Practices

Do’s

• Validate range.end is after range.start before submit — the picker allows partial entry while editing.

Don’ts

• Do not store unix seconds in the bind — use [DateTimeRange] with [OrbitalDateTime] endpoints.

Examples

Meeting slot range

Default US date + 12-hour time range 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="date-time-range-picker-preview">
        <PickerPreviewKnobs />
        <DateTimeRangePicker bind=value />
        <div data-testid="date-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>
}

ISO date and 24-hour time

Combined pickers with ISO date masks and 24-hour time columns.

use crate::DateTimeRange;
use crate::preview::PickerPreviewExample;
let value = RwSignal::new(None::<DateTimeRange>);
view! {
    <PickerPreviewExample data_testid="DTRP-02">
        <DateTimeRangePicker bind=value appearance=DateTimeRangePickerAppearance::iso_time24() />
    </PickerPreviewExample>
}

Optional Props

• bind: impl Into<DateTimeRangePickerBind>
  • Value binding for the combined datetime range pickers.
• appearance: impl Into<DateTimeRangePickerAppearance>
  • Date format, time format, timezone, and disabled state.
• class: impl Into<MaybeProp<String>>
  • Optional CSS class on the layout wrapper.

Fields

bind: DateTimeRangePickerBind

Value binding for the combined datetime range pickers.

appearance: DateTimeRangePickerAppearance

Date format, time format, timezone, and disabled state.

class: MaybeProp<String>

Optional CSS class on the layout wrapper.

Implementations

impl DateTimeRangePickerProps

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

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

Trait Implementations

impl Props for DateTimeRangePickerProps

type Builder = DateTimeRangePickerPropsBuilder

fn builder() -> Self::Builder