Struct TimeFieldProps 

pub struct TimeFieldProps {
    pub bind: TimeFieldBind,
    pub appearance: TimeFieldAppearance,
    pub class: MaybeProp<String>,
}

Props for the TimeField component.

Segmented time input bound to [OrbitalDateTime] on a reference calendar day.

TimeField renders hour/minute (and meridiem for 12-hour) segments. Parsed values are anchored to appearance.reference_date or the nearest DatetimeLocale default. For scroll-column time selection, use core TimePicker.

When to use

• Time-of-day entry with keyboard-friendly segments
• Scheduling forms paired with a date field on the same reference day

Usage

1. Bind Option<OrbitalDateTime> via TimeFieldBind.
2. Set appearance.format to Time12 or Time24.
3. Set appearance.timezone and reference_date when the anchor day or zone differs from defaults.

Lifecycle

• Value: completed time segments commit on blur via SegmentedDatetimeField.
• Open state: no popover — segments are always editable inline.

Timezone

appearance.timezone controls how hour/minute segments resolve to [OrbitalDateTime] on appearance.reference_date.

Examples

Time segments

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

24-hour format

Hour and minute segments without meridiem.

use orbital_base_components::OrbitalDateTime;
use crate::preview::PickerPreviewExample;
let value = RwSignal::new(None::<OrbitalDateTime>);
view! {
    <PickerPreviewExample data_testid="TF-02">
        <TimeField bind=value appearance=TimeFieldAppearance::time24() />
    </PickerPreviewExample>
}

Bind readout

Completed segments update the bound value readout.

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

Optional Props

• bind: impl Into<TimeFieldBind>
  • Value binding for the segmented time input.
• appearance: impl Into<TimeFieldAppearance>
  • Format, reference day, and disabled state.
• class: impl Into<MaybeProp<String>>
  • Optional CSS class on the layout wrapper.

Fields

bind: TimeFieldBind

Value binding for the segmented time input.

appearance: TimeFieldAppearance

Format, reference day, and disabled state.

class: MaybeProp<String>

Optional CSS class on the layout wrapper.

Implementations

impl TimeFieldProps

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

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

Trait Implementations

impl Props for TimeFieldProps

type Builder = TimeFieldPropsBuilder

fn builder() -> Self::Builder