Struct DateRangeFieldProps 

pub struct DateRangeFieldProps {
    pub bind: DateRangeFieldBind,
    pub appearance: DateRangeFieldAppearance,
    pub class: MaybeProp<String>,
}

Props for the DateRangeField component.

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

DateRangeField renders two DateField segment groups separated by an en-dash. Values commit when both endpoints parse successfully. See See the crate README for field vs picker choice.

When to use

• Dense forms where users type dates instead of opening a calendar panel
• Tables or filters that need compact start/end segments

Usage

1. Bind Option<DateTimeRange> through DateRangeFieldBind.
2. Inherit format and timezone from [DatetimeLocale] when wrapped.
3. Pair with DateRangePicker when users also need a calendar popover.

Best Practices

Do’s

• Show validation when end precedes start — the field commits only when both sides parse.

Don’ts

• Do not use for time-only spans — use TimeRangeField instead.

Examples

Range segments

Default US-format start/end segments with bind readout for E2E.

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-field-preview">
        <PickerPreviewKnobs />
        <DateRangeField bind=value />
        <div data-testid="date-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>
}

Bind readout

Completed start and end segments update the bound range.

use crate::DateTimeRange;
use orbital_base_components::ToUnixSeconds;
use crate::preview::PickerPreviewExample;
let value = RwSignal::new(None::<DateTimeRange>);
view! {
    <PickerPreviewExample data_testid="DRF-02">
        <DateRangeField bind=value />
        <div data-testid="DRF-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<DateRangeFieldBind>
  • Value binding for the segmented range input.
• appearance: impl Into<DateRangeFieldAppearance>
  • Format, timezone, and disabled state.
• class: impl Into<MaybeProp<String>>
  • Optional CSS class on the layout wrapper.

Fields

bind: DateRangeFieldBind

Value binding for the segmented range input.

appearance: DateRangeFieldAppearance

Format, timezone, and disabled state.

class: MaybeProp<String>

Optional CSS class on the layout wrapper.

Implementations

impl DateRangeFieldProps

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

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

Trait Implementations

impl Props for DateRangeFieldProps

type Builder = DateRangeFieldPropsBuilder

fn builder() -> Self::Builder