Flutter TextFormField使用Controller时如何修改值实现日期自定义格式化

实现步骤 #

• 第一步：在pubspec.yaml文件中添加日期格式化依赖intl

dependencies:
  flutter:
    sdk: flutter
  # 可替换为当前最新的稳定版本
  intl: ^0.18.1

添加后执行flutter pub get安装依赖。

• 第二步：在使用该组件的dart文件头部导入intl包

import 'package:intl/intl.dart';

• 第三步：修改onTap回调中的controller赋值逻辑，将原来的ISO格式转换为自定义格式后再赋值
  你只需要替换widget.controllerDate.text = dateTime.toIso8601String();这行代码即可，修改后的完整代码片段如下：

DateTime dateTime = DateTime.now();
...
child: TextFormField(
            controller: widget.controllerDate,
            onTap: () => Dialogs.showSheet(context,
                child: buildDatePicker(), onClicked: () {
                  setState(() {
                    // 自定义格式示例：yyyy年MM月dd日，可根据需求自由调整格式字符串
                    widget.controllerDate.text = DateFormat('yyyy年MM月dd日').format(dateTime);
                  });
                  Navigator.pop(context);
                }),
            readOnly: true,
            decoration: const InputDecoration(
              hintText: 'Day',
              enabledBorder: InputBorder.none,
              focusedBorder: InputBorder.none,
            ),
          ),

常用日期格式符参考 #

你可以根据需求组合以下格式符实现任意显示效果：

• yyyy：4位年份，例：2024
• MM：2位补零月份，例：03
• dd：2位补零日期，例：09
• HH：24小时制小时，例：18
• mm：分钟，例：45
• EEEE：星期全称，例：星期四
• MMM：月份缩写，例：3月 / Mar

注意事项 #

如果你的业务需要提交原始标准格式的日期给后端，不要直接用controller的文本值做转换，建议单独存储选中的dateTime对象，或者另外存一份ISO格式的字符串，避免格式转换丢失信息。

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