v0.1.0-alpha
EN
Home
components/daterange
Inputs · 16 / 64

DateRangePicker

ui.widgets.DateRangePicker

Pick a start and an end date.

BEHAVIOR CONTRACT

Range order, both inputs, calendar highlighting and overlay lifetime are coordinated by one component.

RECORDED INTERACTION

The harness clicks “Start date” and the range calendar opens.

examples/storybook/stories.zig:2469
// ── DateRangePicker ──
pub fn buildDateRangePicker(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
    const drp = try W.DateRangePicker(.{ .initial_year = 2026, .initial_month = 5 }).mount(scope, cx);
    return drp.wrapper;
}
View source on GitHubexamples/storybook/stories.zig:2469

The story's verbatim source from the Storybook (zenit 4c50245 2026-10-01). W is ui.widgets; col / row / label are small Storybook layout helpers.

← PREV
DatePicker
NEXT →
Form
zenit · Dual-licensedFree for open-source projects under GPL-3.0-only; closed-source or commercial products need a commercial license.Contact the author: zongyi.xzy#gmail.com (replace # with @)zenit 4c50245 2026-10-01