Flutter TextField 输入验证日期

2024-03-24

我正在尝试编写一个日期输入控件,它接受像 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然后我可以从文本中删除 / 。

我发现这个问题文本字段只能接受数字 https://stackoverflow.com/questions/55631224/flutter-textfield-input-only-decimal-numbers我认为这可能对我有帮助,但我不确定如何实现现有小部件并覆盖其方法。当然,在 TextEditingController 中可能有更简单的方法来做到这一点?


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

  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() 调用它,如下所示。我还合并了两个内置方法。白名单TextInputFormatter()只允许输入数字和斜线(/)字符LengthLimitingTextInputFormatter()限制允许的字符数。后者可以使用 TextField() 的 maxLength 参数来实现,但这里仅作为示例。请注意,还有一个黑名单文本输入格式化程序()这正如你所期望的那样。

白名单TextInputFormatter已删除使用FilteringTextInputFormatter.allow(RegExp("[0-9-]")),替换,并且如果您想更改分割符号(当前是"/"),请添加到正则表达式(....).

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(),
  ],
),
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Flutter TextField 输入验证日期 的相关文章

  • 使用 Flutter 基础类型而不使用 Flutter

    我需要在没有 Flutter 的环境中使用 lib package flutter foundation dart 中存在三种类型 他们是 ByteData ReadBuffer and WriteBuffer 是否可以在不依赖整个 Flu
  • Flutter Spotify Api 身份验证

    我需要在使用 Spotify api 的 Flutter 应用程序中对用户进行身份验证 我使用 flutter web auth 打开 WebView 并让用户在那里登录 我无法返回应用程序 在 Spotify 仪表板中 我将回调 Uri
  • 将单独的月、日和年值转换为时间戳

    我有月份值 1 12 日期值 1 31 和年份值 2010 2011 2012 我还有一个小时值和一个分钟值 我怎样才能把这个给strtotime 它可以以某种方式将其转换为时间戳吗 当您已经知道年月和日期时 为什么将字符串转换为日期 us
  • 自定义卡片形状 Flutter SDK

    我在 Flutter 上使用 GridView 开发了一个应用程序 GridView 项目是卡片 默认卡片形状是半径为 4 的矩形 我知道 Card Widget 有 shape 属性 并且它需要 ShapeBorder 类 但我无法找到如
  • Javafx 从 TextField 获取输入

    这是我当前的代码 它所做的只是为我制作的计算器设置一个 GUI 界面 我希望用户输入两个值 然后当按下 Sum 按钮时 它将两个值加在一起并将其显示在 Sum 文本字段中 我正在尝试使用 JavaFX 如果您能提供一些帮助 我将不胜感激 i
  • 将长值设置为日期并在 Thymeleaf 中对其进行格式化

    我的 Thymeleaf 模板中有这一行 td td 我想在格式化之前将这个长值转换为日期 如果已经是一个日期我会这样做 td td 但是 由于它的值很长 我想先将其设为日期 我在文档中找到了一些相关的方法 但是 不符合我的要求 Creat
  • 用颤动画布在形状上切一个洞

    如何使用颤动画布在形状上 切一个洞 我有一组相当复杂的形状 看起来像现实世界的物体 该物体上有一个圆角矩形形状的孔 我真的很想从形状中减去 RRect 但我找不到任何有关如何执行此操作的信息 canvas clipRRect myRRect
  • 将日期差转换为年数以计算 MongoDB 中的年龄

    我正在使用以下方法来计算时间戳差异中的年龄 db getCollection person aggregate project item 1 DOB personal DOB dateDifference subtract new Date
  • 配置根项目“firebase_auth”时出现问题

    my error 我无法构建 apk 发布文件 我完成了应用程序一段时间 没有出现错误 几天后 我在构建应用程序时收到此错误 请告诉我如何摆脱它 我尝试了 4 个小时 什么也没得到 FAILURE Build failed with an
  • 验证纬度和经度

    我想验证纬度和经度 现在 我只是检查该值是否不为空 但我想要进行验证以检查它是否是有效的纬度或经度 我怎么做 我的财产是这样的 public string Lat get return this lat set base Validatio
  • 是 ValidationFailed 默认值

    会用什么方法facesContext isValidationFailed 当验证失败时 在渲染响应阶段后返回 它返回false对于我来说 它只会返回true when FacesContext validationFailed http
  • 颤振轮播图像滑块在点击事件期间打开单独的页面被调用

    我是新来的 我想问一个关于我的代码的问题 我查看了 youtube 和一些关于这个 inkwell 的 google 教程 以及点击功能来在 flutter 上打开新的类活动 但结果是 当点击图像时 它会打开不同的图像屏幕 但它们共享相同的
  • 在FLUTTER/DART中,为什么我们有时在声明变量时要在“String”后面加一个问号?

    在演示应用程序中 我们找到一个实例 最终字符串 标题 gt 为什么要加这个 在 String 类型之后 class MyHomePage extends StatefulWidget MyHomePage Key key this titl
  • 将 Python 中的日期与日期时间进行比较

    所以我有一个日期列表 datetime date 2013 7 9 datetime date 2013 7 12 datetime date 2013 7 15 datetime date 2013 7 18 datetime date
  • 传递 Stack 中两个小部件之间的所有手势

    我正在开发一个应用程序 在地图上显示标记 如下所示 它的工作方式是标记在地图小部件 上方 呈现为Stack 我的问题是 目前 标记 吸收 用于控制下方地图的手势 如果手势在标记上开始 因此我想知道 有没有办法在堆栈中的两个小部件之间传递所有
  • 禁用视图中所需的验证特定字段 ASP.NET MVC 4

    如果有人能给我一些提示 我将不胜感激 我搜索了一段时间 我什至找到了一个帖子 我认为它可以解决我的问题 但它没有 在某些情况下禁用必需的验证属性 https stackoverflow com questions 5367287 disab
  • 基于浏览器位置/设置的 Angular 2 Datepipe 格式

    有没有办法使 datepipe 动态化 以便如果它是美国浏览器 则 d atepipe 返回美国格式 yyyy MM dd 而当它是欧洲浏览器时 它返回欧洲格式 dd MM yyyy Thanks 这可能很困难 尤其是在使用 aot 时 它
  • Firebase Analytics 禁用受众国家/地区跟踪

    我正在开发一个严格不允许位置跟踪的应用程序 我想使用 Firebase Analytic 的其他功能 例如 PageTransitions 和 Crashalitics 但如果我无法禁用受众位置跟踪 我就无法使用其中任何功能 这是我在 An
  • 防止纸张对话框自动关闭

    Hello 我有一个paper dialog页面中的元素
  • Cloud Functions,删除Firestore SubCollections,是否需要AdminToken?

    我正在尝试构建可调用的云函数 当用户删除帖子时 它也会尝试删除评论 这是帖子的子集合 所以我看到了这个例子并像文档示例一样实现 const admin require firebase admin const firebase tools

随机推荐

  • ActiveRecord:find_in_batches 的替代方案?

    我有一个加载数千个对象的查询 我想通过使用来驯服它find in batches Car includes member where engine gt 123 find in batches batch size 500 根据文档 我不能
  • Babel + Mocha 堆栈跟踪报告错误的行号

    使用 Babel 6 和 Mocha 时 堆栈跟踪报告错误的行号 我很确定这是因为转译添加了额外的代码 对我来说 这是 Babel 6 与 Babel 5 x 中的新行为 有人有关于如何在使用 Mocha 进行单元测试时解决此问题的解决方案
  • 向量化 R 的 dplyr 中每行的“日期范围的扩展”

    我在 R 中的 tibble 中有一个数据集 如下所示 A tibble 50 045 x 5 ref key start date end date
  • 如何使用 Robo 3T 从 MongoDB 导出 JSON

    我正在使用 Robo 3T 以前称为 RoboMongo 我将其连接到 MongoDB 我需要做的是 MongoDB 中有一个集合 我想从该集合中导出数据 以便将其保存到文件中 I used the interface to open th
  • 打印 rdlc 报告而不查看打印对话框

    我正在编写一个 POS 应用程序 需要经常打印发票 我需要将其直接发送到打印机 而不是查看打印对话框 使用 Reportviewer renderingcomplete 我可以避免看到报告 但我不知道如何避免看到打印对话框并在没有用户干预的
  • 如何在异步加载的 HTML 元素之间创建信号量

    我在 HTML 页面中有一个出现多次的元素 并且运行相同的 JS 问题是 我希望它只有在第一个运行它时才执行特定功能 他的兄弟姐妹从未运行过它 我需要信号量在它们之间同步 我无法知道如何在 JS 中声明变量并以这种方式执行信号量 有很多方法
  • Glassfish 中的 JNDI 配置/查找

    我在 Glassfish 中获取一些基本的 JNDI 配置时遇到问题 我认为应该是一个简单的任务 在运行时确定特定属性是否设置为 true 我认为这是 JNDI 的一个很好的应用程序 但似乎无法在应用程序服务器和我的 servlet 代码之
  • 为什么自定义的基于 nib 的表格单元格的 init 方法没有被调用

    我有一个在界面生成器中创建的基于笔尖的表格视图单元 我将表视图单元格的类设置为FooTableViewCell它延伸自UITableViewCell In FooTableViewCell我像这样重写 init 方法 id init if
  • UITableViewRowAction 标题图像

    我做了一个自定义的 UITableViewRowAction 现在我想添加图像而不是文本 我知道这是可能的 但不知道该怎么做 你们中有人知道如何在 Swift 中执行此操作并愿意帮助我吗 感谢您的回答 iOS 11 0 Swift Appl
  • 解释一下c中qsort()函数的类型转换? [关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 1 在这段代码中pLhs and pRhs指向某个随机内存位置 那么如何将该随机内存位置的内容复制到 LHS 指向的位置 2 解释使用的比较
  • bash 脚本中变量的转义

    我的 bash 脚本使用 printf 编写了另一个 bash 脚本 printf bin bash HOME server file gromacs file name basename file date date m d Y for
  • 伊2。访问更高级别的文件夹

    简单的问题 我用Yii2高级模板 在apache I have DocumentRoot path www yii application1 frontend web 我怎样才能访问 www yii application1 uploads
  • 如何在没有日志、没有信息的情况下调试 Laravel 错误 500

    我正在开发现有的 Laravel 应用程序以开发新功能 但在我的计算机上安装该应用程序后 出现错误 500 并且没有任何线索来解决它 在我的 app php 文件中我设置了 env gt env APP ENV local debug gt
  • 是否建议在一个文件中包含多个类? [复制]

    这个问题在这里已经有答案了 可能的重复 我应该在一个文件中放入多少个 Python 类 https stackoverflow com questions 106896 how many python classes should i pu
  • Rails 3 检查属性是否更改

    在 Rails 3 中更新之前需要检查属性块是否已更改 街道 1 街道 2 城市 州 邮政编码 我知道我可以使用类似的东西 if user street1 params user street1 then do something end
  • R中似乎不存在错误光栅文件

    由于 pgirmess 包出现故障 我重新安装了 R 我已经重新下载了所有必需的软件包 我使用了在重新安装之前运行良好的相同脚本 但是我无法读取光栅对象 并且收到一条消息 Error file exists filename is not
  • 更新未屏蔽的 numpy 数组

    我的问题是双重的 首先 假设我有两个 numpy 数组 它们被部分屏蔽 array old 10 11 12 14 17 array update 5 9 15 8 13 19 16 如何创建一个新数组 其中所有非屏蔽值都被更新或修改 例如
  • Python easygui 无法选择文件

    这是我的代码 import easygui f easygui fileopenbox print f 看起来很简单 但是当我运行它时 我无法选择任何文件 请参见链接中的图 抱歉 如果这很愚蠢 但我已经无计可施了 https i stack
  • 安装国际 PHP 扩展 OSX High Sierra

    如何在 PHP 7 1 7 中安装 intl PHP 扩展 随 osx high Sierra 一起提供 所以我有完全相同的问题 正如其他人在这里评论所指出的 High Sierra 附带安装了 PHP 7 1 并且该 PHP 版本已对其进
  • Flutter TextField 输入验证日期

    我正在尝试编写一个日期输入控件 它接受像 23 12 1997 这样的日期 我希望它做的是自动为用户插入 字符 因此 当他们输入 23 时 监听器返回 23 以便他们可以输入 12 此时 监听器再次添加 让用户通过输入 1997 来完成日期