如何使用MUI X Date Picker向接口仅发送YYYY-MM-DD格式日期

MUI X Date Picker 的 onChange 回调默认返回的是 Date 类型对象，axios 发送请求时会自动调用 Date.toISOString() 方法转为带时间的 ISO 格式字符串，这就是你接口收到 2021-11-04T01:07:00.000Z 格式的原因。你只需要在提交前把 Date 对象格式化为 YYYY-MM-DD 格式即可，两种常用方案如下：

方案1：onChange 阶段直接存格式化后的字符串到 state #

你项目已经引入了 DateFnsUtils，可以直接用 date-fns 提供的 format 方法处理日期：

// 先引入format方法
import { format } from 'date-fns'

// 组件代码修改如下
<MuiPickersUtilsProvider utils={DateFnsUtils} >
  <DatePicker 
    value={this.state.open_Date}       
    format="dd/MM/yyyy" // 这里仅控制输入框显示格式，不影响提交值
    disableFuture
    views={["year", "month", "date"]} 
    onChange={date => {
      // 先判断date是否合法，避免空值报错
      if (!date) return
      const formattedDate = format(date, 'yyyy-MM-dd')
      this.handleUserIDChange(formattedDate)
    }}
  />
</MuiPickersUtilsProvider>

方案2：提交时临时格式化，state 保留 Date 类型 #

如果你需要在 state 中保留原始 Date 对象做其他逻辑处理，可以在调用 axios 提交前单独处理日期字段：

// 提交前处理请求参数
const reqParams = {
  ...this.state,
  open_Date: this.state.open_Date ? format(this.state.open_Date, 'yyyy-MM-dd') : null
}
// 调用axios提交
axios.post('你的接口地址', reqParams)

注意事项 #

如果需要避免时区偏移导致的日期错误，可以使用 UTC 模式转换日期：formatISO(date, { representation: 'date' })

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