Skip to Content
Forui 0.17.0 is released 🎉
DocumentationFormDate Field

Date Field

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

API Reference

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 (தமிழ்)

CLI

To generate and customize this style:

dart run forui style create date-field

Usage

FDateField(...)

FDateField(
  control: FDateFieldControl.managed(
    initial: DateTime(2024, 1, 1),
    validator: (date) => date?.isBefore(DateTime.now()) ?? false ? 'Date must be in the future' : null,
  ),
  style: (style) => style.copyWith(...),
  label: const Text('Select Date'),
  description: const Text('Choose a date from the calendar or input field'),
  textAlign: TextAlign.start,
  textAlignVertical: TextAlignVertical.center,
  autofocus: false,
  expands: false,
  onEditingComplete: () {},
  onSubmit: (date) {},
  mouseCursor: SystemMouseCursors.text,
  canRequestFocus: true,
  baselineInputYear: 2000,
  builder: (context, style, states, child) => child!,
  prefixBuilder: (context, style, states) => const Icon(FIcons.calendar),
  suffixBuilder: (context, style, states) => const Icon(FIcons.calendar),
  clearable: true,
  calendar: FDateFieldCalendarProperties(),
  enabled: true,
  onSaved: (date) {},
  onReset: () {},
  autovalidateMode: AutovalidateMode.onUnfocus,
  forceErrorText: null,
  errorBuilder: (context, error) => Text(error),
);

FDateField.calendar(...)

FDateField.calendar(
  control: FDateFieldControl.managed(initial: DateTime(2024, 1, 1)),
  style: (style) => style.copyWith(...),
  label: const Text('Calendar Date'),
  description: const Text('Select a date from the calendar'),
  format: DateFormat('d MMM y'),
  hint: 'Select a date',
  textAlign: TextAlign.start,
  textAlignVertical: TextAlignVertical.center,
  expands: false,
  mouseCursor: SystemMouseCursors.text,
  canRequestFocus: true,
  clearable: true,
  start: DateTime(2024),
  end: DateTime(2025),
  today: DateTime.now(),
  initialType: FCalendarPickerType.yearMonth,
  autoHide: true,
  anchor: Alignment.topLeft,
  fieldAnchor: Alignment.bottomLeft,
  spacing: FPortalSpacing(4),
  overflow: FPortalOverflow.flip,
  offset: Offset.zero,
  hideRegion: FPopoverHideRegion.excludeChild,
  builder: (context, style, states, child) => child!,
  prefixBuilder: (context, style, states) => const Icon(FIcons.calendar),
  suffixBuilder: (context, style, states) => const Icon(FIcons.calendar),
  enabled: true,
  onSaved: (date) {},
  onReset: () {},
  autovalidateMode: AutovalidateMode.onUnfocus,
  forceErrorText: null,
  errorBuilder: (context, error) => Text(error),
);

FDateField.input(...)

FDateField.input(
  control: FDateFieldControl.managed(initial: DateTime(2024, 1, 1)),
  style: (style) => style.copyWith(...),
  label: const Text('Input Date'),
  description: const Text('Enter a date'),
  textInputAction: TextInputAction.done,
  textAlign: TextAlign.start,
  textAlignVertical: TextAlignVertical.center,
  expands: false,
  onEditingComplete: () {},
  onSubmit: (date) {},
  mouseCursor: SystemMouseCursors.text,
  canRequestFocus: true,
  clearable: true,
  baselineInputYear: 2000,
  builder: (context, style, states, child) => child!,
  prefixBuilder: (context, style, states) => const Icon(FIcons.calendar),
  suffixBuilder: (context, style, states) => const Icon(FIcons.calendar),
  enabled: true,
  onSaved: (date) {},
  onReset: () {},
  autovalidateMode: AutovalidateMode.onUnfocus,
  forceErrorText: null,
  errorBuilder: (context, error) => Text(error),
);

Examples

Calendar Only

Input Only

Clearable

Custom Validation

Form

Last updated on
CheckboxLabel