MUI DatePicker日期格式转换求助：如何获取YYYY/MM/DD格式？

问题说明 #

使用最新版MUI DatePicker并搭配DayJS时，选择日期后返回带时区的完整Date格式（如Date Wed Mar 01 2023 00:00:00 GMT+0100），尝试修改onChange逻辑将结果转为YYYY/MM/DD格式但未生效。

尝试的错误代码：

<DatePicker label='Start Date' value={startDate} onChange={(newValue) => setStartDate(dayjs(startDate).format('YYYY/MM/DD'))} />
<DatePicker label='End Date' value={endDate} onChange={(newValue) => setEndDate(dayjs(startDate).format('YYYY/MM/DD'))}/>

原始返回完整日期的代码：

import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import dayjs from 'dayjs';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

const [startDate , setStartDate ] = useState(null);
const [endDate , setEndDate ] = useState(null);     
<DatePicker label='Start Date' value={startDate} onChange={(newValue) => setStartDate(newValue)} />
<DatePicker label='End Date' value={endDate} onChange={(newValue) => setEndDate(newValue)}/>

错误原因 #

1. 参数误用：onChange回调里的newValue是刚选择的日期对象，你却用了旧的startDate来格式化，逻辑完全错误。
2. 类型不匹配：MUI DatePicker的value属性要求传入DayJS对象或原生Date对象，直接存储格式化后的字符串会导致组件无法正常识别，进而失效。

正确解决方案 #

1. 保持state存储正确类型的日期对象 #

继续用DayJS/Date对象维护state，onChange直接保存newValue（搭配AdapterDayjs后，newValue本身就是DayJS对象）：

<DatePicker label='Start Date' value={startDate} onChange={(newValue) => setStartDate(newValue)} />
<DatePicker label='End Date' value={endDate} onChange={(newValue) => setEndDate(newValue)}/>

2. 配置输入框显示格式 #

如果要让DatePicker的输入框显示YYYY/MM/DD格式，给组件添加format属性：

<DatePicker 
  label='Start Date' 
  value={startDate} 
  onChange={(newValue) => setStartDate(newValue)}
  format="YYYY/MM/DD"
/>
<DatePicker 
  label='End Date' 
  value={endDate} 
  onChange={(newValue) => setEndDate(newValue)}
  format="YYYY/MM/DD"
/>

3. 在需要时格式化日期 #

当你需要把日期用于接口提交、文本展示等场景时，再对state里的DayJS对象进行格式化：

// 比如提交表单时
const handleSubmit = () => {
  const formattedStart = startDate ? startDate.format('YYYY/MM/DD') : '';
  const formattedEnd = endDate ? endDate.format('YYYY/MM/DD') : '';
  // 后续逻辑：发送formattedStart和formattedEnd到后端
};

完整示例代码 #

import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import dayjs from 'dayjs';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { useState } from 'react';

const DatePickerDemo = () => {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  const handleSubmit = () => {
    const formattedStart = startDate ? startDate.format('YYYY/MM/DD') : '';
    const formattedEnd = endDate ? endDate.format('YYYY/MM/DD') : '';
    console.log('格式化后的开始日期:', formattedStart);
    console.log('格式化后的结束日期:', formattedEnd);
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker 
        label='Start Date' 
        value={startDate} 
        onChange={(newValue) => setStartDate(newValue)}
        format="YYYY/MM/DD"
      />
      <DatePicker 
        label='End Date' 
        value={endDate} 
        onChange={(newValue) => setEndDate(newValue)}
        format="YYYY/MM/DD"
        style={{ marginLeft: '16px' }}
      />
      <button onClick={handleSubmit} style={{ marginLeft: '16px' }}>
        查看格式化结果
      </button>
    </LocalizationProvider>
  );
};

export default DatePickerDemo;

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