Date Picker

Labeled date field with an anchored calendar panel, bound to OrbitalDateTime.

DatePicker is a labeled-ready date field: users type a locale-formatted date or open the calendar panel to pick a day. The bound value is OrbitalDateTime at start-of-day in your chosen DatetimeTimezone. Convert at API boundaries via ToUnixSeconds or ToIso8601. Display format is controlled via DatetimeFormat. Pair with TimePicker when you need time-of-day. For an inline month grid without a text field, use Calendar instead.

  • Single-date form fields (start date, birth date, due date)
  • Filter bars where a calendar affordance beats free-text parsing alone
  • Flows that need locale-specific display format while storing a canonical timestamp
  • Create an Option<OrbitalDateTime> signal and pass it via DatePickerBind.
  • Set appearance.format and appearance.timezone when display differs from defaults.
  • Wrap in Field with DatePickerRule::required when a date is mandatory.
  • Wrap preview examples in a native element with data-testid for E2E selectors.
Default

Empty date field with calendar suffix button.

Preselected unix value

Existing unix seconds populate the text input on mount.

Bind readout

Panel selection updates the bound unix signal and readout text.

none
ISO format

Year-month-day display for locales that prefer ISO ordering.

UTC timezone

Formatting uses UTC regardless of browser local offset.

Fixed offset timezone

Display anchored to a fixed offset from UTC (e.g. EST).

Required in Field

Required rule shows validation messaging on blur when empty.

Disabled

Input and calendar button cannot be interacted with.

Format and timezone readout

Default US format with UTC timezone reflected in the bound readout.

01/01/2025
Min/max validation

Field shows an error when the typed date falls outside the allowed range.