如何在MUI DatePicker中设置DD/MM/YYYY格式并解决TextField红框问题

报错根本原因 #

MUI v5的DatePicker组件的value属性要求必须传入原生Date类型对象，你当前代码里把toLocaleDateString()生成的日期字符串直接赋值给了value，日期格式字符串和组件要求的入参类型不匹配，所以触发了校验红框、默认值不显示的问题。不管你用'en-GB'格式化还是moment格式化，只要给value传字符串都会报错。

解决方案 #

你不需要提前把日期转成字符串存在state里，只需要在DatePicker上配置inputFormat属性即可控制TextField上显示的日期格式，日期提交给后端/其他场景使用时再做格式化即可。

修正后的代码如下： #

// 初始化状态时直接存Date对象，不要转字符串
const [formData, setFormData] = useState({
  from: "",
  to: "",
  depart: new Date(),
  return: new Date(),
  noOfPassenger: 1,
  tripType: "Return",
});

// 组件部分代码
<div className="dates">
  <LocalizationProvider dateAdapter={AdapterDateFns}>
    <DatePicker
      label="Departure Date"
      disablePast
      // 配置显示格式为dd-mm-yyyy，适配date-fns的格式规则
      inputFormat="dd-MM-yyyy"
      onChange={(newDate) =>
        setFormData({
          ...formData,
          // 直接存返回的Date对象，不要转字符串
          depart: newDate,
        })
      }
      value={formData.depart}
      renderInput={(params) => <TextField {...params} required />}
    />
  </LocalizationProvider>
</div>

返程日期的DatePicker按照同样逻辑配置即可。

提交时获取dd-mm-yyyy格式日期的方法 #

当你需要把日期提交给后端或者在其他位置展示格式化后的字符串时，再做转换即可：

// 提交逻辑示例
const handleSubmit = () => {
  const submitData = {
    ...formData,
    depart: formData.depart.toLocaleDateString('en-GB'),
    return: formData.return.toLocaleDateString('en-GB')
  }
  // 后续提交submitData即可
}

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