React中如何让Material UI DatePicker仅返回纯日期格式结果

问题原因 #

Material-UI DatePicker的format属性仅控制输入框内的显示样式，onChange回调默认返回的是原生JS Date对象，你看到的带时间的字符串是Date对象调用默认toString()方法的输出结果，和组件显示格式无关。

调整方案 #

你只需要在onChange回调中对返回的Date对象做格式化处理即可，以下是两种实现方式：

1. 原生JS实现（无需引入额外库）

const [getDate, setGetDate] = useState(''); // 初始值可以设为空字符串，或者按需求设置默认格式化日期

const handleDateChange = (newDate) => {
  if (!newDate) return;
  const day = String(newDate.getDate()).padStart(2, '0');
  const month = String(newDate.getMonth() + 1).padStart(2, '0');
  const year = newDate.getFullYear();
  // 拼接为你需要的 dd/MM/yyyy 格式
  const formattedDate = `${day}/${month}/${year}`;
  setGetDate(formattedDate);
}

// 组件部分注意修正value绑定的变量和format格式
<DatePicker
  value={getDate}
  format="dd/MM/yyyy" // 调整为和输出一致的显示格式
  minDate={new Date()}
  onChange={handleDateChange}
  label="Date"
  size="small"
  required
  fullWidth
  inputVariant="outlined"
  animateYearScrolling
/>

2. 用日期处理库实现（项目已引入dayjs/moment时推荐）

以dayjs为例，代码更简洁，也能避免手动处理日期的边界问题：

import dayjs from 'dayjs';

const handleDateChange = (newDate) => {
  if (!newDate) return;
  const formattedDate = dayjs(newDate).format('DD/MM/YYYY');
  setGetDate(formattedDate);
}

额外说明 #

如果你后续还需要用选中的日期做计算、对比等操作，也可以选择先存储原始Date对象，只在提交数据或者展示的时候再做格式化，不用提前转成字符串。

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