Struct DateTimeFieldProps 

pub struct DateTimeFieldProps {
    pub bind: DateTimeFieldBind,
    pub appearance: DateTimeFieldAppearance,
    pub class: MaybeProp<String>,
}

Props for the DateTimeField component.

Combined date and time segmented input bound to [OrbitalDateTime].

DateTimeField composes DateField and TimeField on one shared bind. Changing the date preserves the existing time-of-day. For popover pickers, use DateTimePicker instead.

When to use

• Dense forms needing keyboard-friendly date and time entry
• Flows that prefer segmented input over scroll-column pickers

Usage

1. Bind Option<OrbitalDateTime> via DateTimeFieldBind.
2. Set appearance.date_format and appearance.time_format.
3. Wrap in Field when a visible label is required.

Examples

Combined segments

Default US date + 12-hour time 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-time-field-preview">
        <PickerPreviewKnobs />
        <DateTimeField bind=value />
        <div data-testid="date-time-field-preview-VALUE">{move || value.get().map(|v| v.to_unix_seconds().to_string()).unwrap_or_else(|| "none".to_string())}</div>
    </PickerPreviewExample>
}

Bind readout

Completed segments update the bound [OrbitalDateTime].

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

ISO date and 24-hour time

Year-month-day segments followed by 24-hour hour/minute.

use orbital_base_components::OrbitalDateTime;
use crate::preview::PickerPreviewExample;
let value = RwSignal::new(None::<OrbitalDateTime>);
view! {
    <PickerPreviewExample data_testid="DTF-03">
        <DateTimeField bind=value appearance=DateTimeFieldAppearance::iso_time24() />
    </PickerPreviewExample>
}

Optional Props

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

Fields

bind: DateTimeFieldBind

Value binding for the combined segmented input.

appearance: DateTimeFieldAppearance

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

class: MaybeProp<String>

Optional CSS class on the layout wrapper.

Implementations

impl DateTimeFieldProps

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

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

Trait Implementations

impl Props for DateTimeFieldProps

type Builder = DateTimeFieldPropsBuilder

fn builder() -> Self::Builder