DateRangePicker
ui.widgets.DateRangePickerChoisir une date de début et une date de fin.
BEHAVIOR CONTRACT
L'ordre de la plage, les deux saisies, la surbrillance du calendrier et la durée de vie de l'overlay sont coordonnés par un seul composant.
RECORDED INTERACTION
Le harness clique sur « Start date » et le calendrier de plage s'ouvre.
// ── 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;
}Le code source tel quel de la story dans le Storybook (zenit 5f9add5+wip 2026-09-30). W désigne ui.widgets ; col / row / label sont de petits helpers de mise en page du Storybook.
DateRangePickerProps
ui.widgets.DateRangePickerfn DateRangePicker(props: DateRangePickerProps) DateRangePickerBuilderChamp
Type
Défaut
Description
placeholder_start[]const u8"Start date"—
placeholder_end[]const u8"End date"—
start_date?SimpleDatenull—
end_date?SimpleDatenull—
initial_yearu162025—
initial_monthu81—
widthf32320—
sizetheme.ControlSize.md控件尺寸（与 Button / Input / Select 同一 ControlSize，默认 md）
disabledboolfalse—
on_change?core.HandlerRefnull—
calendar_icon_asset?svg_assets.Assetnull—
prev_icon_asset?svg_assets.Assetnull—
next_icon_asset?svg_assets.Assetnull—
test_id?[]const u8null—
DateRangePickerResult
ui.widgets.DateRangePickerChamp
Type
Défaut
Description
wrapper*Node—
—
state*DateRangePickerState—
—