Struct DateTimeRangeFieldProps 

pub struct DateTimeRangeFieldProps {
    pub bind: DateTimeRangeFieldBind,
    pub appearance: DateTimeRangeFieldAppearance,
    pub class: MaybeProp<String>,
}

Props for the DateTimeRangeField component.

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

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

When to use

• Forms that need typed date+time on both endpoints without popover panels
• Accessibility-first flows where segmented fields beat mouse-driven pickers

Usage

1. Bind Option<DateTimeRange> through DateTimeRangeFieldBind.
2. Configure DateTimeRangeFieldAppearance for date and time format independently.
3. Wrap in DatetimeLocale for default timezone.

Best Practices

Do’s

• Pair with DateTimeRangePicker when users want both typing and panels.

Don’ts

• Do not convert to unix in the bind — keep [OrbitalDateTime] endpoints inside [DateTimeRange].

Examples

Datetime range field

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

ISO date and 24-hour time

Year-month-day segments with 24-hour hour/minute endpoints.

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

Optional Props

• bind: impl Into<DateTimeRangeFieldBind>
  • Value binding for the segmented datetime range input.
• appearance: impl Into<DateTimeRangeFieldAppearance>
  • Date format, time format, timezone, and disabled state.
• class: impl Into<MaybeProp<String>>
  • Optional CSS class on the layout wrapper.

Fields

bind: DateTimeRangeFieldBind

Value binding for the segmented datetime range input.

appearance: DateTimeRangeFieldAppearance

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

class: MaybeProp<String>

Optional CSS class on the layout wrapper.

Implementations

impl DateTimeRangeFieldProps

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

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

Trait Implementations

impl Props for DateTimeRangeFieldProps

type Builder = DateTimeRangeFieldPropsBuilder

fn builder() -> Self::Builder