Skip to Content
Forui 0.11.0 is released 🎉

Date Field

A date field allows a date to be selected from a calendar or input field.

It is recommended to use FDateField.calendar on touch devices and FDateField.new/FDateField.input on non-primarily touch devices.

The input field supports both arrow key navigation:

  • Up/Down arrows: Increment/decrement values
  • Left/Right arrows: Move between date segments

The input field does not support the following locales that use non-western numerals, it will default to English:

  • Arabic (العربية)
  • Assamese (অসমীয়া)
  • Bengali (বাংলা)
  • Persian/Farsi (فارسی)
  • Marathi (मराठी)
  • Burmese (မြန်မာ)
  • Nepali (नेपाली)
  • Pashto (پښتو)
  • Tamil (தமிழ்)

Usage

FDateField(...)

FDateField( controller: FDateFieldController( vsync: this, initialDate: DateTime(2024, 1, 1), validator: (date) => date?.isBefore(DateTime.now()) ?? false ? 'Date must be in the future' : null, ), initialDate: DateTime(2024, 1, 1), style: FDateFieldStyle(...), textAlign: TextAlign.start, textAlignVertical: TextAlignVertical.center, autofocus: false, expands: false, onEditingComplete: () => print('Editing complete'), onSubmit: (date) => print('Date submitted: $date'), mouseCursor: SystemMouseCursors.text, canRequestFocus: true, baselineInputYear: 2000, builder: (context, styles, child) => child!, prefixBuilder: (context, styles, child) => Icon(Icons.calendar_today), suffixBuilder: null, clearable: true, calendar: FDateFieldCalendarProperties(), label: Text('Select Date'), description: Text('Choose a date from the calendar or input field'), enabled: true, onChange: (date) => print('Date changed: $date'), onSaved: (date) => print('Date saved: $date'), autovalidateMode: AutovalidateMode.onUnfocus, forceErrorText: null, errorBuilder: (context, error) => Text(error, style: TextStyle(color: Colors.red)), );

FDateField.calendar(...)

FDateField.calendar( controller: FDateFieldController( vsync: this, initialDate: DateTime(2024, 1, 1), ), initialDate: DateTime(2024, 1, 1), format: DateFormat('d MMM y'), textAlign: TextAlign.start, textAlignVertical: TextAlignVertical.center, expands: false, mouseCursor: SystemMouseCursors.text, canRequestFocus: true, clearable: true, onChange: (date) => print('Date changed: $date'), hint: 'Select a date', start: DateTime(2024), end: DateTime(2025), today: DateTime.now(), initialType: FCalendarPickerType.yearMonth, autoHide: true, anchor: Alignment.topLeft, inputAnchor: Alignment.bottomLeft, spacing: FPortalSpacing(4), shift: FPortalShift.flip, offset: Offset.zero, hideOnTapOutside: FHidePopoverRegion.none, label: Text('Calendar Date'), description: Text('Select a date from the calendar'), builder: (context, styles, child) => child!, prefixBuilder: (context, styles, child) => Icon(Icons.calendar_today), suffixBuilder: null, forceErrorText: null, errorBuilder: (context, error) => Text(error, style: TextStyle(color: Colors.red)), );

FDateField.input(...)

FDateField.input( controller: FDateFieldController( vsync: this, initialDate: DateTime(2024, 1, 1), ), initialDate: DateTime(2024, 1, 1), format: DateFormat('d MMM y'), textAlign: TextAlign.start, textAlignVertical: TextAlignVertical.center, expands: false, mouseCursor: SystemMouseCursors.text, canRequestFocus: true, clearable: true, onChange: (date) => print('Date changed: $date'), hint: 'Select a date', start: DateTime(2024), end: DateTime(2025), today: DateTime.now(), initialType: FCalendarPickerType.yearMonth, autoHide: true, anchor: Alignment.topLeft, inputAnchor: Alignment.bottomLeft, hideOnTapOutside: FHidePopoverRegion.none, label: Text('Calendar Date'), description: Text('Select a date from the calendar'), builder: (context, styles, child) => child!, prefixBuilder: (context, styles, child) => Icon(Icons.calendar_today), suffixBuilder: null, forceErrorText: null, errorBuilder: (context, error) => Text(error, style: TextStyle(color: Colors.red)), );

Examples

Calendar Only

Input Only

Clearable

Custom Validation

Form

Last updated on