输入与表单Inputs · 15 / 64

DatePicker

ui.widgets.DatePicker

输入单个日期并使用日历选择。Enter a single date or pick it from a calendar.

BEHAVIOR CONTRACT

触发器、calendar overlay、月份导航、选中值与 dismiss 行为成套提供。Trigger, calendar overlay, month navigation, selection and dismissal ship together.

RECORDED INTERACTION

Harness 点击 Pick a date，日历面板展开。The harness clicks “Pick a date” and the calendar opens.

examples/storybook/stories.zig:2463

// ── DatePicker ──
pub fn buildDatePicker(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
    const dp = try W.DatePicker(.{ .placeholder = "Pick a date", .initial_year = 2026, .initial_month = 5 }).mount(scope, cx);
    return dp.wrapper;
}

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

这是 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

FileUploadFileUpload

DateRangePickerDateRangePicker