Skip to main content

Module date_range_edit

Module date_range_edit 

Source
Expand description

DateRangeEdit — single unified control for picking a DateRange.

Visually one widget: a single bordered frame containing two TextInputField halves separated by a painted arrow glyph, with a trailing built-in calendar button that opens a shared Calendar::range popover. Backed by Signal<Option<DateRange>>.

┌──────────────────────────────────────┐
│ 05/12/2026   →   05/19/2026   │ 📅  │
└──────────────────────────────────────┘

§Why one frame?

Two adjacent DateEdits (one frame each) visually read as two separate fields that happen to be next to each other. A single frame says “this is one range”. Same affordance the user is used to from booking sites and analytics dashboards.

§Behaviour

  • Two text halves — each masked from the resolved date pattern, each with its own validator + segment-stepping (Up/Down on the focused segment matches DateEdit).
  • Painted arrow separator — a thin chevron-right glyph, no text. Visual only; AT users see the wrapper’s Role::DateInput.
  • One trailing calendar button — Int UI IconButton::embedded() with the calendar glyph. Opens a single popover hosting Calendar::range bound to the outer signal. The two-anchor click model (start-then-end) commits the range and closes the popover. No per-half calendar buttons — there’s only one calendar, anchored to the wrapper.
  • 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::DateInput, its value the two days in full joined by words in the tree’s locale (“du vendredi premier mai 2026 au mardi 5 mai 2026”, “Friday, May 1, 2026 to Tuesday, May 5, 2026”), the same calendar-date-range message the range calendar speaks.
  • Each TextInputField carries its own AT node, a Role::TextInput named for its half (“Start date”, “End date”); the wrapper’s Role::DateInput provides the range semantics. A half re-roled Role::DateInput reached Orca as a date editor, which it reads without its text.
  • The calendar opens on the start the field holds, on its days, with no range begun, whatever an earlier opening left.
ⓘ
// Requires ctx.signal() — shown as ignore per convention.
use teksilo_widgets::date_range_edit::DateRangeEdit;
use jiff::civil::Weekday;

let range = ctx.signal(None);
let _w = DateRangeEdit::new(range.clone())
    .first_day_of_week(Weekday::Monday)
    .on_value_changed(|r, _ctx| println!("{r:?}"));

§Touch and pen

See DateEdit’s “Touch and pen” section.

Structs§

DateRangeEdit
Two-handle date picker over Signal<Option<DateRange>>. See the module docs for the visual layout and behaviour.