Struct DateFieldProps 

pub struct DateFieldProps {
    pub bind: DateFieldBind,
    pub appearance: DateFieldAppearance,
    pub class: MaybeProp<String>,
}

Props for the DateField component.

Segmented date input with locale-aware section masks, bound to [OrbitalDateTime].

DateField renders editable month/day/year (or ISO) segments instead of a single text box. Values are stored as start-of-day [OrbitalDateTime] in the chosen timezone. Convert at API boundaries via ToUnixSeconds or ToIso8601. For a text field with popover calendar, use core DatePicker instead.

When to use

• Dense forms that benefit from section-wise date entry
• Keyboards-first flows where users tab through date parts
• Flows that need segmented date entry without a popover calendar

Usage

1. Bind Option<OrbitalDateTime> via DateFieldBind.
2. Set appearance.format to IsoDate or UsDate.
3. Wrap in Field when a visible label is required.

Lifecycle

• Value: each segment commits the parsed date on blur when all required sections are complete.
• Open state: no popover — segments are always editable inline.

Timezone

appearance.timezone controls start-of-day normalization for parsed segment values.

Best Practices

Do’s

• Bind with [OrbitalDateTime], not raw unix seconds
• Wrap preview examples in a native element with data-testid

Don’ts

• Do not use for time-of-day — prefer TimeField
• Do not put data-testid on the component itself

Examples

Segmented input

Default US-format month/day/year segments with bind readout for E2E.

use orbital_base_components::{OrbitalDateTime, ToUnixSeconds};
use crate::preview::{PickerPreviewExample, PickerPreviewKnobs};
let value = RwSignal::new(None::<OrbitalDateTime>);
view! {
    <PickerPreviewExample data_testid="date-field-preview">
        <PickerPreviewKnobs />
        <DateField bind=value />
        <div data-testid="date-field-preview-VALUE">{move || value.get().map(|v| v.to_unix_seconds().to_string()).unwrap_or_else(|| "none".to_string())}</div>
    </PickerPreviewExample>
}

Bind readout

Typing complete segments updates the bound [OrbitalDateTime].

use orbital_base_components::{OrbitalDateTime, ToUnixSeconds};
use crate::preview::PickerPreviewExample;
let value = RwSignal::new(None::<OrbitalDateTime>);
view! {
    <PickerPreviewExample data_testid="DF-02">
        <DateField bind=value />
        <div data-testid="DF-02-VALUE">{move || value.get().map(|v| v.to_unix_seconds().to_string()).unwrap_or_else(|| "none".to_string())}</div>
    </PickerPreviewExample>
}

ISO format

Year-month-day segment order for ISO locales.

use orbital_base_components::{DatetimeFormat, OrbitalDateTime};
use crate::preview::PickerPreviewExample;
let value = RwSignal::new(None::<OrbitalDateTime>);
view! {
    <PickerPreviewExample data_testid="DF-03">
        <DateField bind=value appearance=DateFieldAppearance { format: Signal::from(DatetimeFormat::IsoDate), ..Default::default() } />
    </PickerPreviewExample>
}

Optional Props

• bind: impl Into<DateFieldBind>
  • Value binding for the segmented date input.
• appearance: impl Into<DateFieldAppearance>
  • Format, timezone, and disabled state.
• class: impl Into<MaybeProp<String>>
  • Optional CSS class on the layout wrapper.

Fields

bind: DateFieldBind

Value binding for the segmented date input.

appearance: DateFieldAppearance

Format, timezone, and disabled state.

class: MaybeProp<String>

Optional CSS class on the layout wrapper.

Implementations

impl DateFieldProps

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

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

Trait Implementations

impl Props for DateFieldProps

type Builder = DateFieldPropsBuilder

fn builder() -> Self::Builder