Flutter中如何为TextField添加日期掩码？

没问题！我来帮你实现TextField的日期掩码功能——确实，在选择出生日期这类场景下，带掩码的文本输入比日期选择器更灵活，用户可以直接快速输入。下面是具体的实现方案，结合你的代码片段来调整：

步骤1：添加依赖包 #

最便捷的方式是使用mask_text_input_formatter这个专门处理输入掩码的Flutter包，先在pubspec.yaml中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  mask_text_input_formatter: ^2.9.0 # 建议使用最新版本

步骤2：导入包并创建掩码格式化器 #

在你的页面文件中导入包，然后定义日期掩码的格式化规则（这里以DD/MM/YYYY为例）：

import 'package:mask_text_input_formatter/mask_text_input_formatter.dart';

// 创建日期掩码格式化器
final dateMaskFormatter = MaskTextInputFormatter(
  mask: '##/##/####', // 定义掩码格式
  filter: {"#": RegExp(r'[0-9]')}, // 只允许输入数字
  type: MaskAutoCompletionType.lazy, // 输入时自动补充分隔符
);

步骤3：应用到你的TextFormField #

把格式化器添加到TextFormField的inputFormatters参数中，同时完善你的验证函数：

static final TextEditingController _birthDate = TextEditingController();

TextFormField(
  controller: _birthDate,
  maxLength: 10,
  keyboardType: TextInputType.datetime,
  inputFormatters: [dateMaskFormatter], // 应用日期掩码
  decoration: const InputDecoration(
    labelText: '出生日期',
    hintText: 'DD/MM/YYYY',
  ),
  validator: _validateDate,
);

// 完善日期验证函数
String? _validateDate(String? value) {
  if (value == null || value.isEmpty) {
    return '请填写出生日期';
  }
  // 检查格式是否完整（必须是10位，比如DD/MM/YYYY）
  if (value.length != 10) {
    return '请输入有效的日期格式（如：12/05/1990）';
  }
  // 验证日期是否合法（避免出现32/13/2023这类无效日期）
  try {
    final dateParts = value.split('/');
    final day = int.parse(dateParts[0]);
    final month = int.parse(dateParts[1]);
    final year = int.parse(dateParts[2]);
    DateTime(year, month, day); // 尝试创建DateTime，无效会抛出异常
  } catch (e) {
    return '请输入真实有效的日期';
  }
  return null;
}

步骤4：将输入字符串转换为DateTime #

验证通过后，可以用下面的方法把输入的格式化字符串转换成DateTime类型：

DateTime? convertToDateTime() {
  final input = _birthDate.text;
  if (_validateDate(input) != null) return null;
  
  final parts = input.split('/');
  return DateTime(
    int.parse(parts[2]),
    int.parse(parts[1]),
    int.parse(parts[0]),
  );
}

额外说明 #

• 这个掩码会在用户输入时自动插入/分隔符，比如输入12051990会自动变成12/05/1990，完全符合用户的输入习惯
• 验证函数不仅检查格式，还通过创建DateTime实例确保日期的有效性，避免无效日期的输入
• 如果不想依赖第三方包，也可以自定义TextInputFormatter，但第三方包已经处理了各种边界情况，更省心

内容的提问来源于stack exchange，提问作者Victor Henrique