TimePicker

A modal clock for selecting a time of day. Like the date picker, it is shown as a dialog through the page.

Example

picker = time_picker(
  value: "09:30",
  help_text: "Pick a start time",
  on_change: ->(event) { page.update(label, value: event.control.value) }
)

filled_button(content: text("Set time"), on_click: ->(_e) { page.show_dialog(picker) })

Common properties

• value — the selected time (HH:MM)
• hour_format — 12- or 24-hour display
• entry_mode — "dial", "input"
• help_text / cancel_text / confirm_text
• hour_label_text / minute_label_text
• orientation

Usage

Read the choice with control.value. The picker auto-confirms on the client and fires on_change; reopen it with page.show_dialog.

Complete API

Helpers

• time_picker(**props)
• timepicker(**props)

Accepted properties

• adaptive — Adapts to the platform (Material/Cupertino) when true.
• badge — Badge drawn on the corner of the control.
• barrier_color — Barrier color.
• cancel_text — Cancel text.
• col — Responsive column span (1-12) per breakpoint.
• confirm_text — Confirm text.
• data — Arbitrary value you can attach to the control and read back in handlers.
• disabled — Disables interaction when true.
• entry_mode — Sets the entry mode property.
• error_invalid_text — Error invalid text.
• expand — Fills the available space along the parent's main axis when true.
• expand_loose — Like expand, but only grows up to the child's natural size.
• help_text — Help text.
• hour_format — Sets the hour format property.
• hour_label_text — Hour label text.
• key — Stable identity used to preserve state across rebuilds.
• locale — Sets the locale property.
• minute_label_text — Minute label text.
• modal — Sets the modal property.
• opacity — Opacity from 0.0 (transparent) to 1.0 (opaque).
• open — Whether the control (dialog/sheet/menu) is open.
• orientation — Sets the orientation property.
• rtl — Renders right-to-left when true.
• switch_to_input_icon — Switch to input icon.
• switch_to_timer_icon — Switch to timer icon.
• tooltip — Text shown on hover/long-press.
• value — The control's current value.
• visible — Hides the control when false.

Events

• on_change — Fired when the value changes.
• on_dismiss — Fired when the control is dismissed.
• on_entry_mode_change — Fired on entry mode change.

Wire reference

• Family: materials
• Widget type: timepicker