Skip to main content

Module date_time_edit

Module date_time_edit 

Source
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’s Role::DateTimeInput. The separator can be replaced with a custom string via separator (rendered as styled secondary text).
  • One trailing calendar button — Int UI IconButton::embedded() with the calendar glyph. Opens a single popover hosting Calendar::single bound 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::Focused while any half holds focus, otherwise Default), validation-aware border (Error for Invalid, Focused for Corrected).
  • One validation strip below the frame — composed feedback from both halves (worse of the two wins).

§Accessibility

  • Container — Role::DateTimeInput with set_value formatted as YYYY-MM-DDTHH:MM:SS (ISO 8601 datetime).
  • Each TextInputField keeps its own Role::TextInput AT node; the wrapper’s Role::DateTimeInput provides 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§

DateTimeEdit
Single unified datetime picker over Signal<Option<DateTime>>. See the module docs for the visual layout and behaviour.