React中如何将Material UI Datepicker选中日期转为yyyy-MM-dd格式作为API参数

问题根因 #

Material UI Pickers的KeyboardDatePicker搭配DateFnsUtils使用时，onChange回调返回的是原生Date类型对象，而非你设置的format属性对应的格式化字符串。你当前代码直接将Date对象存入state，拼接接口URL时会自动调用Date对象的toString()方法，就会输出你遇到的GMT格式字符串。

解决方案 #

统一用date-fns做日期格式化，在onChange阶段就将日期转为符合要求的字符串存入state，同时避免混用moment和date-fns两套日期工具减少依赖体积。

具体修改步骤 #

• 引入date-fns的格式化方法
• 修改onChange回调逻辑，将返回的Date对象格式化为yyyy-MM-dd字符串后再更新state
• 可选：将初始值也改为date-fns生成，移除moment依赖

修改后的核心代码 #

import React, { useState, useEffect } from "react";
import DateFnsUtils from "@date-io/date-fns";
import { format } from "date-fns";
import { DatePicker, KeyboardDatePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";

function ExchangeRate() {
  // 初始值用date-fns生成，不需要moment
  const [date, setDate] = useState(format(new Date(), "yyyy-MM-dd"));

  useEffect(() => {
    // 其他业务逻辑保持不变
    function getExchangeRates(base, currencyCode) {
      // 此处date已经是yyyy-MM-dd格式，可直接拼接使用
      const url = `https://data.fixer.io/api/${date}?&base=USD`;
      return fetch(url)
        .then((res) => res.json())
        .then(handleAPIErrors)
        .then((res) => res.rates);
    }
    // 补充你缺失的其他业务逻辑即可，注意把date加入useEffect依赖数组
  }, [date])

  return (
    {/* 其他组件代码保持不变 */}
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <KeyboardDatePicker
        autoOk
        label="Material Date Picker"
        format="yyyy-MM-dd"
        animateYearScrolling
        value={date}
        {/* 新增格式转换逻辑，加空值判断避免清空输入时报错 */}
        onChange={(newDate) => newDate && setDate(format(newDate, "yyyy-MM-dd"))}
      />
    </MuiPickersUtilsProvider>
  )
}

时区适配说明 #

如果接口要求的是UTC时区的yyyy-MM-dd格式，将format替换为以下逻辑即可：

format(newDate, "yyyy-MM-dd", { timeZone: "UTC" })

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