DatePicker
DatePicker is the single-date picker in the authoring widget set.
Its value model is Option<NaiveDate>. That means the field can either have no date yet or one concrete calendar date. The open state is also explicit: your app decides when the popup is open, and the widget simply renders that state.
Example
use chrono::NaiveDate;
use fission::prelude::*;
use std::sync::Arc;
let node = DatePicker {
id: WidgetNodeId::explicit("publish_date"),
value: view.state.publish_date,
is_open: view.state.publish_date_open,
width: Some(200.0),
on_change: Some(Arc::new(move |date: NaiveDate| ActionEnvelope {
id: set_publish_date_id,
payload: serde_json::to_vec(&SetPublishDate(date)).unwrap(),
})),
on_toggle: Some(toggle_publish_date_action),
on_close: Some(close_publish_date_action),
}
.build(ctx, view);
A common reducer flow is: on_toggle opens the picker, on_change stores the selected date, and the same reducer or a follow-up action closes the picker.
Field table
| Field | Type | Meaning | Notes / default behavior |
|---|---|---|---|
id | WidgetNodeId | Stable identity for the trigger and popover. | Required. |
value | Option<NaiveDate> | Currently selected date, or no date yet. | Controlled by app state. |
is_open | bool | Whether the popup calendar is visible. | Controlled by app state. |
width | Option<f32> | Preferred trigger width. | Defaults to 164.0, then clamps against the viewport when needed. |
on_change | Option<Arc<dyn Fn(NaiveDate) -> ActionEnvelope + Send + Sync>> | Closure that creates the action for a chosen day. | Called when the user selects a date. |
on_toggle | Option<ActionEnvelope> | Action for opening or toggling the popup. | Usually flips is_open. |
on_close | Option<ActionEnvelope> | Action for explicit popup dismissal. | Use this to close on outside click without overloading your toggle logic. |
Value model and current behavior
The checked-in DatePicker uses an outline Button as its trigger and opens a calendar popover. It does not currently parse free-form typed dates. If value is None, the trigger reads "Select Date". If a date exists, it is displayed in YYYY-MM-DD form.
The popup calendar opens around the selected date or today. If you need a richer month-navigation state model, the current wrapper does not own that state for you; compose with the lower-level calendar pieces instead.
Product pitfalls to avoid
Store a real NaiveDate in state, not a locale-formatted display string. A display string is for rendering, not for business logic. Also remember that a date picker chooses a calendar day, not a timezone-aware instant. If your product cares about midnight boundaries, time zones, or scheduled timestamps, keep those concerns separate from the picker's user interface value.