Expand description
DateTimeEdit — single unified control for picking a DateTime.
Visually one widget: a single bordered frame containing a date
TextInputField half, a small painted separator, a time
TextInputField half, and a trailing built-in calendar button that
opens a Calendar popover anchored below the wrapper. Backed by
Signal<Option<DateTime>>.
┌──────────────────────────────────────┐
│ 05/02/2026 · 14:35 │ 📅 │
└──────────────────────────────────────┘§Why one frame?
Two adjacent DateEdit + TimeEdit (one frame each) visually read
as two separate fields that happen to be next to each other. A single
frame says “this is one moment in time” — same affordance the user
is used to from booking sites, calendar apps, and form builders.
§Behaviour
- Two text halves — date pattern on the left (locale-derived strftime subset), time pattern on the right (24h or 12h, with or without seconds). Each half carries its own input mask, validator, and segment-stepping (Up/Down on the focused segment).
- Painted separator — a thin middle-dot glyph (
·), no text. Visual only; AT users see the wrapper’sRole::DateTimeInput. The separator can be replaced with a custom string viaseparator(rendered as styled secondary text). - One trailing calendar button — Int UI
IconButton::embedded()with the calendar glyph. Opens a single popover hostingCalendar::singlebound to the date half. Picking a cell commits the date and closes the popover; the time half retains whatever the user typed. - One frame — focus-aware border (
BorderRole::Focusedwhile any half holds focus, otherwiseDefault), validation-aware border (ErrorforInvalid,FocusedforCorrected). - One validation strip below the frame — composed feedback from both halves (worse of the two wins).
§Accessibility
- Container —
Role::DateTimeInputwithset_valueformatted asYYYY-MM-DDTHH:MM:SS(ISO 8601 datetime). - Each
TextInputFieldkeeps its ownRole::TextInputAT node; the wrapper’sRole::DateTimeInputprovides the datetime semantics.
ⓘ
// Requires ctx.signal() — shown as ignore per convention.
use teksilo_widgets::date_time_edit::{DateTimeEdit, SecondsMode};
let datetime = ctx.signal(None);
let _w = DateTimeEdit::new(datetime.clone())
.seconds(SecondsMode::Hidden)
.on_value_changed(|dt, _ctx| println!("{dt:?}"));Structs§
- Date
Time Edit - Single unified datetime picker over
Signal<Option<DateTime>>. See the module docs for the visual layout and behaviour.