You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter DateTimePicker选中日期短暂显示后恢复当前日期解决方法

问题根因

选中日期短暂显示后自动回弹为当前日期,核心原因是日期格式不匹配:

  • 你给组件配置的dateMask为dd MMMM yyyy,要求传入initialValue的日期字符串必须完全符合这个格式
  • 但onChanged回调中你把选中日期转成了dd-MM-yyyy格式再赋值给绑定的dob变量
  • setState触发组件重建时,组件无法解析格式不匹配的initialValue,就会自动回退显示默认的当前日期。
修复方法

核心原则是保证传给initialValue的日期值和dateMask要求的格式完全一致,如果业务逻辑需要其他格式的日期串,单独用变量存储,不要覆盖组件绑定的变量。
修复后的可正常运行代码如下:

Card(
  color: Colors.blue[50],
  margin: EdgeInsets.only(left: 20, top: 5, right: 20),
  shape: RoundedRectangleBorder(
    side: BorderSide(color: Colors.black54, width: 1),
  ),
  child: Container(
    margin: EdgeInsets.only(left: 30, top: 5, right: 30, bottom: 10),
    child: DateTimePicker(
      validator: (val) => val == null ? "Please pick date of birth" : null,
      cursorColor: Color(0xFF75101D),
      type: DateTimePickerType.date,
      dateMask: 'dd MMMM yyyy',
      initialValue: dob, // 传入的dob必须符合dd MMMM yyyy格式
      lastDate: DateTime(2100),
      icon: Icon(Icons.event),
      dateLabelText: 'Date of Birth',
      onChanged: (val) {
        setState(() {
          // 直接赋值组件返回的、符合mask格式的选中值
          dob = val;
          // 若业务需要dd-MM-yyyy格式的日期,单独定义变量存储即可,不要修改dob
          // DateTime selectDate = DateTime.parse(val);
          // String businessFormatDob = DateFormat('dd-MM-yyyy').format(selectDate);
        });
      },
      firstDate: DateTime(1950),
    ),
  ),
)
额外注意事项
  • 初始化dob变量时,要么设为null让组件默认展示空态,要么传入符合dd MMMM yyyy格式的字符串,不要传格式不匹配的初始值
  • 不要随意修改onChanged回调中传给绑定变量的值格式,必须和dateMask规则对齐

内容的提问来源于stack exchange,提问作者Vidya B H

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.29 19:21:29