日期的 Flutter TextField 输入验证

Question

我正在尝试编写一个日期输入控件，它接受像 23/12/1997 这样的日期。我希望它做的是自动为用户插入 / 字符。因此，当他们输入 23 时，侦听器返回 23/，这样他们就可以输入 12。此时，侦听器再次添加一个 /，让用户通过输入 1997 来完成日期。我的 TextEditingController 代码一半有效，如下所示：

final _controller = TextEditingController();

_controller.addListener(() {
      String text = _controller.text;
      if (text.length == 2) {
        text += '/';
      }
      if (text.length == 5) {
        text += '/';
      }
      _controller.value = _controller.value.copyWith(
        text: text,
        selection:
            TextSelection(baseOffset: text.length, extentOffset: text.length),
        composing: TextRange.empty,
      );
      print(_controller.text);
    }

所以它可以正常工作，直到用户出错并需要回溯。一旦 / 被删除，它会立即被替换，停止对日期的任何进一步编辑。

为了让它工作，我需要访问之前输入的文本，以确定用户是否正在退格。所以如果text == 23/ && previous_text == 23/1那时我可以从文本中删除 / 。

我发现这个问题textfield must only accept numbers，我认为它可能对我有帮助，但我不确定如何实现现有的小部件并覆盖其方法。当然，在 TextEditingController 中可能有更简单的方法来做到这一点？

Answer 1

我找到了解决日期验证输入所需的内容。它并不完美，但对于我正在尝试做的事情来说已经足够了。我所需要的只是查看TextField()的inputFormatters方法。这允许操作输入文本以将其放入任意数量的用户定义格式。我为任何想尝试的人提供了一段我的代码：

  class _DateFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue prevText, TextEditingValue currText) {
    int selectionIndex;

    // Get the previous and current input strings
    String pText = prevText.text;
    String cText = currText.text;
    // Abbreviate lengths
    int cLen = cText.length;
    int pLen = pText.length;

    if (cLen == 1) {
      // Can only be 0, 1, 2 or 3
      if (int.parse(cText) > 3) {
        // Remove char
        cText = '';
      }
    } else if (cLen == 2 && pLen == 1) {
      // Days cannot be greater than 31
      int dd = int.parse(cText.substring(0, 2));
      if (dd == 0 || dd > 31) {
        // Remove char
        cText = cText.substring(0, 1);
      } else {
        // Add a / char
        cText += '/';
      }
    } else if (cLen == 4) {
      // Can only be 0 or 1
      if (int.parse(cText.substring(3, 4)) > 1) {
        // Remove char
        cText = cText.substring(0, 3);
      }
    } else if (cLen == 5 && pLen == 4) {
      // Month cannot be greater than 12
      int mm = int.parse(cText.substring(3, 5));
      if (mm == 0 || mm > 12) {
        // Remove char
        cText = cText.substring(0, 4);
      } else {
        // Add a / char
        cText += '/';
      }
    } else if ((cLen == 3 && pLen == 4) || (cLen == 6 && pLen == 7)) {
      // Remove / char
      cText = cText.substring(0, cText.length - 1);
    } else if (cLen == 3 && pLen == 2) {
      if (int.parse(cText.substring(2, 3)) > 1) {
        // Replace char
        cText = cText.substring(0, 2) + '/';
      } else {
        // Insert / char
        cText =
            cText.substring(0, pLen) + '/' + cText.substring(pLen, pLen + 1);
      }
    } else if (cLen == 6 && pLen == 5) {
      // Can only be 1 or 2 - if so insert a / char
      int y1 = int.parse(cText.substring(5, 6));
      if (y1 < 1 || y1 > 2) {
        // Replace char
        cText = cText.substring(0, 5) + '/';
      } else {
        // Insert / char
        cText = cText.substring(0, 5) + '/' + cText.substring(5, 6);
      }
    } else if (cLen == 7) {
      // Can only be 1 or 2
      int y1 = int.parse(cText.substring(6, 7));
      if (y1 < 1 || y1 > 2) {
        // Remove char
        cText = cText.substring(0, 6);
      }
    } else if (cLen == 8) {
      // Can only be 19 or 20
      int y2 = int.parse(cText.substring(6, 8));
      if (y2 < 19 || y2 > 20) {
        // Remove char
        cText = cText.substring(0, 7);
      }
    }

    selectionIndex = cText.length;
    return TextEditingValue(
      text: cText,
      selection: TextSelection.collapsed(offset: selectionIndex),
    );
  }
}

要使用它，只需从 Textfield() 调用它，如下所示。我还合并了两个内置方法。WhitelistingTextInputFormatter()只允许输入数字和斜杠 (/) 字符，LengthLimitingTextInputFormatter()限制允许的字符数。后者可以使用 TextField() 的 maxLength 参数来实现，但此处仅作为示例。请注意，还有一个BlacklistingTextInputFormatter()可以按照您的预期执行。

TextField(
  // maxLength: 10,
  keyboardType: TextInputType.datetime,
  controller: _controllerDOB,
  focusNode: _focusNodeDOB,
  decoration: InputDecoration(
    hintText: 'DD/MM/YYYY',
    counterText: '',
  ),
  inputFormatters: [
    WhitelistingTextInputFormatter(RegExp("[0-9/]")),
    LengthLimitingTextInputFormatter(10),
    _DateFormatter(),
  ],
),