R uflet

Widgets

DatePicker

DatePicker

A modal calendar for selecting a date. It is shown as a dialog, so it is opened through the page (show_dialog) rather than placed inline.

Example

picker = date_picker(
  value: "2026-01-15",
  first_date: "2026-01-01",
  last_date: "2026-12-31",
  on_change: ->(event) { page.update(label, value: event.control.value) }
)

filled_button(content: text("Pick a date"), on_click: ->(_e) { page.show_dialog(picker) })

Common properties

  • value — the selected date (ISO YYYY-MM-DD)
  • first_date / last_date — the selectable range
  • current_date
  • date_picker_mode — "day", "year"
  • entry_mode — "calendar", "input"
  • help_text / cancel_text / confirm_text
  • field_label_text / field_hint_text
  • time_picker for a time of day.
  • date_range_picker for a start/end range — read start_value and

end_value.

Usage

The picker confirms itself on the client and reports the new value through on_change. Read it with control.value. Reopen it with page.show_dialog again — it reopens cleanly after a selection.

Complete API

Helpers

  • date_picker(**props)
  • datepicker(**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.
  • current_date — Sets the current date property.
  • data — Arbitrary value you can attach to the control and read back in handlers.
  • date_picker_mode — Sets the date picker mode property.
  • disabled — Disables interaction when true.
  • entry_mode — Sets the entry mode property.
  • error_format_text — Error format text.
  • 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.
  • field_hint_text — Field hint text.
  • field_label_text — Field label text.
  • first_date — Sets the first date property.
  • help_text — Help text.
  • inset_padding — Inset padding.
  • key — Stable identity used to preserve state across rebuilds.
  • keyboard_type — On-screen keyboard type (e.g. number, email).
  • last_date — Sets the last date property.
  • locale — Sets the locale property.
  • modal — Sets the modal property.
  • opacity — Opacity from 0.0 (transparent) to 1.0 (opaque).
  • open — Whether the control (dialog/sheet/menu) is open.
  • rtl — Renders right-to-left when true.
  • switch_to_calendar_icon — Switch to calendar icon.
  • switch_to_input_icon — Switch to input 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: datepicker
Previous DataTable Next DateRangePicker