输入与表单Inputs · 16 / 64

DateRangePicker

ui.widgets.DateRangePicker

选择 start / end 两端日期。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

Harness 点击 Start date，范围日历展开。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;
}

在 GitHub 查看源码View source on GitHubexamples/storybook/stories.zig:2469

这是 Storybook 中该 story 的原样代码（zenit 5f9add5+wip 2026-09-30）。其中 W 即 ui.widgets，col / row / label 是 Storybook 内的布局小工具。The story's verbatim source from the Storybook (zenit 5f9add5+wip 2026-09-30). W is ui.widgets; col / row / label are small Storybook layout helpers.

← PREV

DatePickerDatePicker

FormForm