DatePicker

A month-at-a-time date picker. Renders a header (< January 2024 >), the day-of-week row, and a 7-column day grid. The current selection (value) is highlighted; cursor navigation moves it.

Learn more: Forms & validation

Import: package:fleury/fleury.dart, or package:fleury/fleury_core.dart in browser code.

Usage

DatePicker(
  value: _date,
  label: 'Date',
  onChanged: (date) => setState(() => _date = date),
)

Details

Keys when focused:

• ← / → move by one day within the week row
• ↑ / ↓ move by one week within the month
• PageUp / PageDown previous / next month
• Home / End first / last day of the visible month
• [ / ] previous / next year
• t jump to today
• Enter consume (selection already committed on each move)

An arrow that would step off the week row or out of the month passes on instead, so directional focus traversal can leave the calendar; use PageUp and PageDown to change months.

Controlled — hold the value yourself and update it from onChanged. Days outside [firstDate, lastDate] (when provided) are dimmed, and the selection can’t move onto them. Passing null for onChanged disables the picker.

Constructors

DatePicker()

Parameter	Type	Default	Description
value:	DateTime	required	Currently-selected day (only the y/m/d portion is read).
onChanged:	void Function(DateTime date)?	required	Called when keyboard, pointer, or semantic interaction selects a day. Enter is consumed without invoking this callback because navigation has already committed the selection.
firstDate:	DateTime?	—	Lower bound (inclusive). Days before this are dimmed and skipped.
lastDate:	DateTime?	—	Upper bound (inclusive). Days after this are dimmed and skipped.
weekStartsOn:	CalendarWeekStart	CalendarWeekStart.sunday	Which day starts a week — drives the day-of-week header order and the column layout. Defaults to Sunday (matches CalendarHeatmap).
label:	String?	—	Optional label exposed through the semantic app graph.
focusNode:	FocusNode?	—	Focus node used for keyboard navigation.
autofocus:	bool	false	Whether the picker requests focus when mounted.
style:	CellStyle?	—	Base styling, plus optional focus, selected, disabled, and invalid state entries from CellStyle.interactive.

Source

DatePicker is defined in packages/fleury/lib/src/catalog/date_picker.dart.

Category: Inputs & controls · All widgets

Live demo

datepicker_example.dart

Restart Run Expand

Example · editable Revert Format

class _DatePickerExampleState extends State<_DatePickerExample> {
  DateTime _d = DateTime(2026, 6, 22);
  @override
  Widget build(BuildContext context) => DatePicker(
    value: _d,
    label: 'Date',
    onChanged: (d) => setState(() => _d = d),
  );
}

Live preview

Live · interactive

click & type to interact ⓘ how this demo runs ⛶ Expand