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(),
  ],
),

Answer 2

您可以使用flutter制作的日期选择器对话框。

<a href="contact.html" style="text-decoration:none">Contact<br></a>

日期的Flutter TextField输入验证

2 个答案: