Setting Date format validations to a text field

Question

I have created two text fields named starrt date and end date which should accept dates in the format yyyy/mm/dd only.Right now user can input it in any format.How can set validations for the user to input the date in yyyy/mm/dd.

Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Flexible(
                    child: Padding(
                      padding: const EdgeInsets.all(3.0),
                      child: TxtField(
                        fillColor: Cultured,
                        labelText: 'Start Date',
                        hintText: '2022-01-10',
                        onChanged: (value) => context
                            .read<CareRequirementsScreenBloc>()
                            .add(StartDateChanged(value)),
                      ),
                    ),
                  ),
                  Flexible(
                    child: Padding(
                      padding: const EdgeInsets.all(3.0),
                      child: TxtField(
                        fillColor: Cultured,
                        labelText: 'End Date',
                        hintText: '2022-01-10',
                        onChanged: (value) => context
                            .read<CareRequirementsScreenBloc>()
                            .add(EndDateChanged(value)),
                      ),
                    ),
                  ),
                ],
              ),

Here TxtField is a custom text field I have created using TextFormField

score 1 · Answer 1 · answered May 03 '22 at 07:17

1

Make DatePicker instead of keyboard to ensure a proper format.

answered May 03 '22 at 07:17

LMech

150
1
9

score 0 · Answer 2 · answered May 03 '22 at 07:25

0

You should really use a DatePicker: What is the correct way to add date picker in flutter app?

If you insist on doing it the non-standard way, you can use a FilteringTextInputFormatter: Flutter - Regex in TextFormField

answered May 03 '22 at 07:25

nvoigt

75,013
26
93
142

score 0 · Answer 3 · answered Mar 03 '23 at 15:47

You can use this as inputFormatters and TextInputType.number as keyboardType.

class DateTextFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    if (newValue.text.length > oldValue.text.length &&
        newValue.text.isNotEmpty &&
        oldValue.text.isNotEmpty) {
      if (RegExp('[^0-9/]').hasMatch(newValue.text)) return oldValue;
      if (newValue.text.length > 10) return oldValue;
      if (newValue.text.length == 2 || newValue.text.length == 5) {
        return TextEditingValue(
          text: '${newValue.text}/',
          selection: TextSelection.collapsed(
            offset: newValue.selection.end + 1,
          ),
        );
      } else if (newValue.text.length == 3 && newValue.text[2] != '/') {
        return TextEditingValue(
          text:
              '${newValue.text.substring(0, 2)}/${newValue.text.substring(2)}',
          selection: TextSelection.collapsed(
            offset: newValue.selection.end + 1,
          ),
        );
      } else if (newValue.text.length == 6 && newValue.text[5] != '/') {
        return TextEditingValue(
          text:
              '${newValue.text.substring(0, 5)}/${newValue.text.substring(5)}',
          selection: TextSelection.collapsed(
            offset: newValue.selection.end + 1,
          ),
        );
      }
    } else if (newValue.text.length == 1 &&
        oldValue.text.isEmpty &&
        RegExp('[^0-9]').hasMatch(newValue.text)) {
      return oldValue;
    }
    return newValue;
  }
}

Setting Date format validations to a text field

3 Answers3