Regex mask with two digit number validation using 'mask_text_input_formatter'

Question

I want to create a regexp for the month part in my input mask. This is what I have so far. But with this approach I can't write anything in the month part because it checks for only one digit ('m') and it expects to be two digits I think.

  MaskTextInputFormatter _birthdayFormatter = MaskTextInputFormatter(
    mask: 'dd/mm/yyyy',
    filter: {'d': RegExp(r'[0-9]'), 'm': RegExp(r'(^0?[1-9]$)|(^1[0-2]$)'), 'y': RegExp(r'[0-9]')}
  );

Is there a way to achieve this?

Answer 1

Mask and key

final _formKey = GlobalKey<FormState>();

MaskTextInputFormatter _birthdayFormatter = MaskTextInputFormatter(
  mask: '##/##/####',
  filter: {"#": RegExp(r'[0-9]')},
);

Form

Form(
    key: _formKey,
    child: TextFormField(
      inputFormatters: [_birthdayFormatter],
      decoration: InputDecoration(
        hintText: 'dd/mm/yyyy',
      ),
      validator: (value) {
        if (value == null || value.isEmpty) {
          return 'Please enter date';
        }
        List<String> dateParts = value.split('/');
        if (dateParts.length != 3) {
          return 'Date must be in dd/mm/yyyy format';
        }

        int? day = int.tryParse(dateParts[0]);
        int? month = int.tryParse(dateParts[1]);
        int? year = int.tryParse(dateParts[2]);

        if (day == null || day < 1 || day > 31) {
          return 'Day must be a number between 1 and 31';
        }

        if (month == null || month < 1 || month > 12) {
          return 'Month must be a number between 1 and 12';
        }

        if (year == null || year < 1900 || year > 3000) {
          return 'Year must be a number between 1900 and 3000';
        }

        // Create a DateTime to check if the date is correct.
        DateTime? date =
            DateTime.tryParse('$year-$month-$day');
        if (date == null) {
          return 'Invalid date';
        }

        return null;
      },
    ),
  ),

Validator

if (_formKey.currentState!.validate()) {
  // If the form is valid, display a Snackbar.
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      content: Text('Processing Data')));
}