React编辑表单中如何获取dd/mm/yyyy格式日期并支持日期选择器修改

问题根因 #

HTML原生date类型输入框仅支持YYYY-MM-DD格式的字符串作为绑定值，而MongoDB存储的是ISO 8601标准的完整时间字符串（如2021-07-22T00:00:00.000Z），两者格式不匹配会导致日期无法正常回显。

解决方案 #

回显阶段格式转换 #

给TextField赋值前，将从MongoDB获取的ISO日期转换为YYYY-MM-DD格式，建议使用UTC日期方法取值，避免时区偏移导致的日期显示偏差：

// 工具函数：ISO 8601日期转input date支持的格式
const formatDateToInput = (isoDate) => {
  if (!isoDate) return ''
  const date = new Date(isoDate)
  const year = date.getUTCFullYear()
  const month = String(date.getUTCMonth() + 1).padStart(2, '0')
  const day = String(date.getUTCDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

修改TextField组件的value属性：

<TextField
  name="purchaseDate"
  type="date"
  required
  variant="outlined"
  fullWidth
  value={formatDateToInput(bookData.purchaseDate)}
  onChange={(e) => setBookData({ ...bookData, purchaseDate : e.target.value })}
/>

提交阶段格式还原 #

修改完成后提交数据到MongoDB前，将YYYY-MM-DD格式的日期转回ISO 8601格式即可：

// 提交前处理数据
const finalSubmitData = {
  ...bookData,
  purchaseDate: new Date(bookData.purchaseDate).toISOString()
}
// 调用接口提交finalSubmitData

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