TimePicker

TimePicker is the inline time picker in the authoring widget set.

Its value model is intentionally simple: one hour from 0 to 23 and one minute from 0 to 59. That makes it a good fit for appointment times, reminder times, and schedule filters where the product cares about a local wall-clock time rather than a full timestamp.

Example

use fission::prelude::*;
use std::sync::Arc;

let widget: Widget = TimePicker {
hour: view.state().start_hour,
minute: view.state().start_minute,
on_change: Some(Arc::new(move |hour, minute| ActionEnvelope {
    id: set_start_time_id,
    payload: serde_json::to_vec(&SetStartTime { hour, minute }).unwrap(),
})),
}
.into();

The reducer receives both parts together, which makes it easy to keep the state consistent.

Field table

Field	Type	Meaning	Notes / default behavior
hour	u32	Current hour value.	Expected range is 0..=23.
minute	u32	Current minute value.	Expected range is 0..=59.
on_change	Option<Arc<dyn Fn(u32, u32) -> ActionEnvelope + Send + Sync>>	Closure that creates the action for a changed time.	Called with the new hour and minute pair.

Current value model and behavior

The checked-in TimePicker is built from two NumberInput steppers separated by a colon. It is not a free-form text parser. Incrementing and decrementing wrap naturally inside the valid hour and minute ranges.

This is good for predictable state updates, but it also means you should not expect locale-aware 12-hour text entry or seconds support from the current widget.

Product pitfalls to avoid

Keep the source of truth as structured time values, not a formatted display string. Also remember that a local wall-clock time is not the same thing as a timezone-aware instant. If your product schedules jobs globally, connect the picked hour and minute to a real date and timezone in your domain model.

Production checklist

For TimePicker, review the fields that change behavior before treating the widget as finished: hour, minute, on_change. The goal is to make the product rule visible in state and actions, not hidden inside ad-hoc construction code.

•

Bind on_change to explicit reducer actions and test that the reducer handles unavailable, duplicate, or invalid input safely.

•

Check the semantics tree for the user-facing label or role that makes this widget understandable without relying only on pixels.

•

Add at least one component or harness test that confirms the visible text, semantic role, action dispatch, and layout constraint that matter for this widget in context.

If a screen starts repeating the same TimePicker setup, extract a named component around this widget. That keeps the reference API small while making product code easier to read and safer for generated code to copy.

DatePicker, DateRangePicker, NumberInput, and FormControl.