将日期格式验证设置为文本字段

Question

我创建了两个名为starrt日期和结束日期的文本字段，它们应以格式yyyy/mm/dd的格式接受日期。现在，用户可以以任何格式输入它。如何为用户设置验证以输入yyyy/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)),
                      ),
                    ),
                  ),
                ],
              ),

这里是我使用textformfield创建的自定义文本字段

Answer 1

制作 /a>而不是键盘以确保正确的格式。

Answer 2

您应该真正使用datepicker：什么在Flutter应用中添加日期选择器的正确方法是吗？

如果您坚持使用非标准方式，则可以使用FilteringTextInputFormatter： flutter- textformfield中的正则

Answer 3

您可以将其用作inputFormatters和textInputType.number作为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;
  }
}

Answer 4

您可以使用InputDatePickerFormField，该输入基于用户的语言环境验证输入：
https://api.flutter.dev/flutter.dev/flutter.dev/flutter.dev/flutter/flutter/material/material/material/inputdatepickerfield-class-class-class-class-class-class-class-class-class-class-class-class-class。 html