Flutter中修改showDatePicker输入模式日期格式及自定义验证

一、修改输入模式的日期格式为dd/mm/yyyy（局部生效，不影响全局） #

直接给showDatePicker单独指定locale参数即可，无需全局修改应用Locale。选择一个默认日期格式为dd/mm/yyyy的地区Locale（比如英国的Locale('en', 'GB')），这个Locale只会作用于当前的日期选择器弹窗，不会影响应用其他部分的语言或格式。

修改后的代码示例： #

首先确保在pubspec.yaml中添加intl依赖并执行flutter pub get：

dependencies:
  flutter:
    sdk: flutter
  intl: ^0.18.1

然后编写代码：

import 'package:intl/intl.dart';
import 'package:flutter/material.dart';

Future<void> _selectDate(BuildContext context) async {
  // 指定局部生效的Locale，英国地区默认日期格式为dd/mm/yyyy
  final Locale datePickerLocale = Locale('en', 'GB');
  
  DateTime? selectedDate = await showDatePicker(
    context: context,
    initialDate: DateTime.now(),
    firstDate: DateTime(2020),
    lastDate: DateTime(2030),
    locale: datePickerLocale, // 关键：添加局部Locale
    builder: (context, child) {
      return Theme(
        data: Theme.of(context).copyWith(
          inputDecorationTheme: const InputDecorationTheme(
            hintText: "dd/mm/yyyy", // 保持提示文本与格式一致
          ),
        ),
        child: child!,
      );
    },
  );

  if (selectedDate != null) {
    String formattedDate = DateFormat("dd/MM/yyyy").format(selectedDate);
    _dateController.text = formattedDate;
  }
}

二、实现自定义日期验证逻辑 #

可以在用户确认日期后添加自定义验证规则，也可以结合输入过程中的实时验证，以下是两种实用场景的实现：

1. 确认后验证（简单直接） #

在获取到选择/输入的日期后，检查是否符合自定义规则，不符合则提示用户并拒绝更新输入框：

if (selectedDate != null) {
  // 自定义规则1：禁止选择周末
  if (selectedDate.weekday == DateTime.saturday || selectedDate.weekday == DateTime.sunday) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text("不能选择周末日期")),
    );
    return; // 不更新输入框，直接返回
  }

  // 自定义规则2：额外限制日期范围（可选，showDatePicker已有基础范围限制）
  if (selectedDate.isBefore(DateTime(2022)) || selectedDate.isAfter(DateTime(2028))) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text("日期需在2022-2028之间")),
    );
    return;
  }

  // 验证通过，更新输入框
  String formattedDate = DateFormat("dd/MM/yyyy").format(selectedDate);
  _dateController.text = formattedDate;
}

2. 输入过程中实时验证（进阶） #

如果需要在用户输入文本时就进行格式或规则验证，可以通过builder回调包装输入框，添加TextInputFormatter或监听文本变化：

// 先定义临时控制器和错误提示变量
final TextEditingController _tempDateController = TextEditingController();
String? _dateError;

// 在showDatePicker的builder中替换输入框
builder: (context, child) {
  return Theme(
    data: Theme.of(context).copyWith(
      inputDecorationTheme: InputDecorationTheme(
        hintText: "dd/mm/yyyy",
        errorStyle: const TextStyle(color: Colors.red),
      ),
    ),
    child: TextField(
      controller: _tempDateController,
      inputFormatters: [
        FilteringTextInputFormatter.digitsOnly,
        LengthLimitingTextInputFormatter(8),
        // 自定义格式化器，自动插入斜杠
        DateInputFormatter(),
      ],
      onChanged: (text) {
        // 实时验证格式
        if (!RegExp(r'^\d{2}/\d{2}/\d{4}$').hasMatch(text)) {
          _dateError = "请输入正确的dd/mm/yyyy格式";
        } else {
          _dateError = null;
        }
      },
      decoration: InputDecoration(
        errorText: _dateError,
      ),
    ),
  );
},

注：这种方式需要自己实现DateInputFormatter来处理输入时的斜杠插入，如果希望保留原生showDatePicker的弹窗样式，更推荐使用第一种确认后验证的方式。

内容的提问来源于stack exchange，提问作者VENKAT RUTHVIK SAI KONDA