Struct DateTimePickerProps 

pub struct DateTimePickerProps {
    pub bind: DateTimePickerBind,
    pub appearance: DateTimePickerAppearance,
    pub class: MaybeProp<String>,
}

Props for the DateTimePicker component.

Side-by-side date and time pickers sharing one [OrbitalDateTime] bind.

DateTimePicker composes core DatePicker and TimePicker. Changing the calendar day preserves the existing time-of-day. For keyboard segment entry without popovers, use DateTimeField.

When to use

• Event scheduling forms (start/end datetime)
• Flows that need both calendar and scroll-column time selection
• Combined date and time selection with calendar and scroll-column pickers

Usage

1. Bind Option<OrbitalDateTime> via DateTimePickerBind.
2. Set appearance.date_format and appearance.time_format for locale masks.
3. Wrap in DatetimeLocale for shared defaults.

Examples

Date and time pickers

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-picker-preview">
        <PickerPreviewKnobs />
        <DateTimePicker bind=value />
        <div data-testid="date-time-picker-preview-VALUE">{move || value.get().map(|v| v.to_unix_seconds().to_string()).unwrap_or_else(|| "none".to_string())}</div>
    </PickerPreviewExample>
}

Bind readout

Selecting date and time updates the bound [OrbitalDateTime].

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

24-hour time

Date picker with 24-hour scroll columns.

use orbital_base_components::OrbitalDateTime;
use crate::preview::PickerPreviewExample;
let value = RwSignal::new(None::<OrbitalDateTime>);
view! {
    <PickerPreviewExample data_testid="DTP-03">
        <DateTimePicker bind=value appearance=DateTimePickerAppearance::time24() />
    </PickerPreviewExample>
}

Disabled

Both pickers are non-interactive.

use orbital_base_components::OrbitalDateTime;
use crate::preview::PickerPreviewExample;
let value = RwSignal::new(None::<OrbitalDateTime>);
view! {
    <PickerPreviewExample data_testid="DTP-04">
        <DateTimePicker bind=value appearance=DateTimePickerAppearance { disabled: Signal::from(true), ..Default::default() } />
    </PickerPreviewExample>
}

Optional Props

• bind: impl Into<DateTimePickerBind>
  • Value binding for the combined date-time pickers.
• appearance: impl Into<DateTimePickerAppearance>
  • Date format, time format, timezone, and disabled state.
• class: impl Into<MaybeProp<String>>
  • Optional CSS class on the layout wrapper.

Fields

bind: DateTimePickerBind

Value binding for the combined date-time pickers.

appearance: DateTimePickerAppearance

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

class: MaybeProp<String>

Optional CSS class on the layout wrapper.

Implementations

impl DateTimePickerProps

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

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

Trait Implementations

impl Props for DateTimePickerProps

type Builder = DateTimePickerPropsBuilder

fn builder() -> Self::Builder