Struct DateRangePickerProps 

pub struct DateRangePickerProps {
    pub bind: DateRangePickerBind,
    pub appearance: DateRangePickerAppearance,
    pub class: MaybeProp<String>,
    pub picker_field_slot: Option<PickerFieldSlot>,
    pub open_trigger_slot: Option<OpenTriggerSlot>,
}

Props for the DateRangePicker component.

Range field with an anchored dual-month calendar panel, bound to [DateTimeRange].

DateRangePicker composes DateRangeField and DateRangeCalendar in a click popover. See See the crate README for when to pick range pickers vs fields.

When to use

• Flight or hotel booking flows that need a visible calendar span
• Report filters where users pick start and end days in one control

Usage

1. Wrap the tree in DatetimeLocale when timezone or format vary.
2. Bind Option<DateTimeRange> through DateRangePickerBind.
3. Document the feature with [DatePickerFeatures::RANGE_PICKERS] — there is no runtime license check.

Best Practices

Do’s

• Wrap in Field with a clear label like “Travel dates”.

Don’ts

• Do not submit until both endpoints are set — None means an incomplete range.

Examples

Flight booking range

Default range field with two-month calendar panel 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="date-range-picker-preview">
        <PickerPreviewKnobs />
        <DateRangePicker bind=value />
        <div data-testid="date-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>
}

Bind readout

Completing a calendar range updates the bound value.

use crate::DateTimeRange;
use orbital_base_components::ToUnixSeconds;
use crate::preview::PickerPreviewExample;
let value = RwSignal::new(None::<DateTimeRange>);
view! {
    <PickerPreviewExample data_testid="DRP-02">
        <DateRangePicker bind=value />
        <div data-testid="DRP-02-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>
}

Optional Props

• bind: impl Into<DateRangePickerBind>
  • Value binding for the range field and calendar.
• appearance: impl Into<DateRangePickerAppearance>
  • Field format, panel count, and popover options.
• class: impl Into<MaybeProp<String>>
  • Optional CSS class on the layout wrapper.
• picker_field_slot: PickerFieldSlot
  • Optional custom range field slot replacing the default DateRangeField.
• open_trigger_slot: OpenTriggerSlot
  • Optional custom open button slot replacing the calendar icon.

Fields

bind: DateRangePickerBind

Value binding for the range field and calendar.

appearance: DateRangePickerAppearance

Field format, panel count, and popover options.

class: MaybeProp<String>

Optional CSS class on the layout wrapper.

picker_field_slot: Option<PickerFieldSlot>

Optional custom range field slot replacing the default DateRangeField.

open_trigger_slot: Option<OpenTriggerSlot>

Optional custom open button slot replacing the calendar icon.

Implementations

impl DateRangePickerProps

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

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

Trait Implementations

impl Props for DateRangePickerProps

type Builder = DateRangePickerPropsBuilder

fn builder() -> Self::Builder