Form

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

CLI

To generate a specific style for customization:

dart run forui style create date-field

Usage

`FDateField(...)`

1FDateField(
2  size: .md,
3  style: .delta(fieldStyles: .delta([])),
4  enabled: true,
5)

`FDateField.calendar(...)`

1FDateField.calendar(
2  size: .md,
3  style: .delta(fieldStyles: .delta([])),
4  enabled: true,
5)

`FDateField.input(...)`

1FDateField.input(
2  size: .md,
3  style: .delta(fieldStyles: .delta([])),
4  enabled: true,
5)

Examples

Calendar Modes

Split Grid Calendar

Wheel Calendar

Calendar Only

Input Only

Clearable

Custom Validation

Form

Checkbox

A control that allows the user to toggle between checked and not checked.

Date Time Picker

A date and time picker that allows a date and time to be selected. The picker supports arrow key navigation. Recommended for touch devices.

On this page

CLI Usage FDateField(...)FDateField.calendar(...)FDateField.input(...)Examples Calendar Modes Split Grid Calendar Wheel Calendar Calendar Only Input Only Clearable Popover Builder Custom Validation Form