Material UI DatePicker对象干扰FormData提交：日期格式问题

1. 让DatePicker直接返回Moment对象或字符串 #

返回Moment对象 #

Material UI DatePicker默认返回原生Date对象，要返回Moment需配置对应日期适配器：

1. 安装依赖：npm install @date-io/moment moment
2. 用LocalizationProvider包裹DatePicker：

import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import moment from 'moment';

// 在Formik表单内使用
<LocalizationProvider dateAdapter={AdapterMoment}>
  <DatePicker
    label="选择日期"
    name="eventDate"
    value={formik.values.eventDate}
    onChange={(newMomentDate) => {
      formik.setFieldValue('eventDate', newMomentDate);
    }}
  />
</LocalizationProvider>

此时onChange返回的就是Moment实例，后续可直接用newMomentDate.format('YYYY-MM-DD')生成标准日期字符串。

直接返回日期字符串 #

无需额外依赖，在onChange里手动格式化原生Date对象：

<DatePicker
  label="选择日期"
  name="eventDate"
  value={formik.values.eventDate}
  onChange={(newDate) => {
    // 转成YYYY-MM-DD格式的字符串
    const dateStr = newDate.toISOString().split('T')[0];
    formik.setFieldValue('eventDate', dateStr);
  }}
/>

如果需要带时间的格式，可改用Intl.DateTimeFormat自定义：

const dateTimeStr = new Intl.DateTimeFormat('zh-CN', {
  year: 'numeric', month: '2-digit', day: '2-digit',
  hour: '2-digit', minute: '2-digit'
}).format(newDate);

2. 转换现有特殊日期对象为字符串 #

先确认对象类型（避免误判），再格式化：

// 检测是否为Date对象（包括包装过的实例）
const isDate = (obj) => Object.prototype.toString.call(obj) === '[object Date]';

if (isDate(yourDateObj)) {
  // 转ISO格式日期字符串
  const isoStr = yourDateObj.toISOString();
  // 或转YYYY-MM-DD
  const dateStr = isoStr.split('T')[0];
}

3. 后端Spring接收类型选择 #

优先用日期类型而非String，Spring能自动解析并校验合法性：

接收纯日期（YYYY-MM-DD） #

用LocalDate配合@DateTimeFormat注解：

// 实体类接收
public class FormRequest {
    @DateTimeFormat(pattern = "yyyy-MM-dd")
    private LocalDate eventDate;
    
    // getter、setter
}

// 接口示例
@PostMapping("/submit-form")
public ResponseEntity<String> submitForm(@RequestBody FormRequest request) {
    // 直接使用request.getEventDate()处理
    return ResponseEntity.ok("提交成功");
}

接收日期时间（如ISO8601格式） #

改用LocalDateTime，调整注解pattern：

@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private LocalDateTime eventDateTime;

如果前端格式不固定，才考虑用String接收，再手动转成日期类型，但会增加后端处理成本，不推荐。

内容的提问来源于stack exchange，提问作者The Old County