Date 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

1@override
2Widget build(BuildContext _) => const FDateField(
3  label: Text('Appointment Date'),
4  description: Text('Select a date for your appointment'),
5);
6

CLI

To generate and customize this style:

dart run forui style create date-field

Usage

`FDateField(...)`

1FDateField(
2  style: const .delta(fieldStyle: .delta()),
3  enabled: true,
4)

`FDateField.calendar(...)`

1FDateField.calendar(
2  style: const .delta(fieldStyle: .delta()),
3  enabled: true,
4)

`FDateField.input(...)`

1FDateField.input(
2  style: const .delta(fieldStyle: .delta()),
3  enabled: true,
4)

Examples

Calendar Only

1@override
2Widget build(BuildContext _) => const FDateField.calendar(
3  label: Text('Appointment Date'),
4  description: Text('Select a date for your appointment'),
5);
6

Input Only

1@override
2Widget build(BuildContext _) => const FDateField.input(
3  label: Text('Appointment Date'),
4  description: Text('Select a date for your appointment'),
5);
6

Clearable

1@override
2Widget build(BuildContext _) => FDateField(
3  control: .managed(initial: .now()),
4  label: const Text('Appointment Date'),
5  description: const Text('Select a date for your appointment'),
6  clearable: true,
7);
8

Custom Validation

1@override
2Widget build(BuildContext _) => FDateField(
3  control: .managed(
4    validator: (date) => date?.weekday == 6 || date?.weekday == 7
5        ? 'Date cannot be a weekend.'
6        : null,
7  ),
8  label: const Text('Appointment Date'),
9  description: const Text('Select a date for your appointment'),
10);
11

Form

1class FormDateFieldExample extends StatefulWidget {
2  @override
3  State<FormDateFieldExample> createState() => _FormDateFieldExampleState();
4}
5
6class _FormDateFieldExampleState extends State<FormDateFieldExample> {
7  final _key = GlobalKey<FormState>();
8  late final _startController = FDateFieldController(
9    validator: (date) => switch (date) {
10      null => 'Please select a start date',
11      final date when date.isBefore(.now()) =>
12        'Start date must be in the future',
13      _ => null,
14    },
15  );
16
17  @override
18  void dispose() {
19    _startController.dispose();
20    super.dispose();
21  }
22
23  @override
24  Widget build(BuildContext _) => Form(
25    key: _key,
26    child: Column(
27      children: [
28        FDateField(
29          control: .managed(controller: _startController),
30          label: const Text('Start Date'),
31          description: const Text('Select a start date'),
32          autovalidateMode: .disabled,
33        ),
34        const SizedBox(height: 20),
35        FDateField(
36          control: .managed(
37            validator: (date) => switch (date) {
38              null => 'Please select an end date',
39              final date
40                  when _startController.value != null &&
41                      date.isBefore(_startController.value!) =>
42                'Start date must be in the future',
43              _ => null,
44            },
45          ),
46          label: const Text('End Date'),
47          description: const Text('Select an end date'),
48          autovalidateMode: .disabled,
49        ),
50        const SizedBox(height: 25),
51        FButton(
52          child: const Text('Submit'),
53          onPress: () {
54            if (_key.currentState!.validate()) {
55              // Form is valid, process the dates
56            }
57          },
58        ),
59      ],
60    ),
61  );
62}
63

On this page