Material UI DateRangePicker 取值格式化：如何将日期转为yyyy-MM-DD HH:mm格式

实现思路 #

你从DateRangePicker拿到的value是[起始Date对象, 结束Date对象]结构的数组，只需要先将Date对象的时间部分重置为当天0点，再按目标格式输出即可。

基于你当前使用的日期适配器实现 #

1. date-fns适配器场景 #

import { startOfDay, format } from 'date-fns'

const [value, setValue] = useState([null, null]);
// 可额外声明state存储格式化后的结果
const [formattedValue, setFormattedValue] = useState([null, null]);

<LocalizationProvider dateAdapter={DateAdapter}>
    <StaticDateRangePicker
        displayStaticWrapperAs="desktop"
        allowSameDateSelection={true}
        format="yyyy-MM-DD HH:mm"
        calendars={1}
        value={value}
        onChange={(newValue) => {
          setValue(newValue);
          if (newValue[0] && newValue[1]) {
            const start = format(startOfDay(newValue[0]), 'yyyy-MM-dd HH:mm');
            const end = format(startOfDay(newValue[1]), 'yyyy-MM-dd HH:mm');
            setFormattedValue([start, end]);
          } else {
            setFormattedValue([null, null]);
          }
        }}
        renderInput={(startProps, endProps) => {}}
    />
</LocalizationProvider>

2. dayjs适配器场景 #

替换onChange内的格式化逻辑即可：

import dayjs from 'dayjs'

// onChange内逻辑
const start = dayjs(newValue[0]).startOf('day').format('YYYY-MM-DD HH:mm');
const end = dayjs(newValue[1]).startOf('day').format('YYYY-MM-DD HH:mm');

3. moment适配器场景 #

替换onChange内的格式化逻辑即可：

import moment from 'moment'

// onChange内逻辑
const start = moment(newValue[0]).startOf('day').format('YYYY-MM-DD HH:mm');
const end = moment(newValue[1]).startOf('day').format('YYYY-MM-DD HH:mm');

原生JS实现（无需第三方库） #

如果不想依赖适配器对应的日期库，可以用原生API封装格式化方法：

const formatToZeroTime = (date) => {
  if (!date) return null;
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day} 00:00`;
}

// 调用示例
const formattedStart = formatToZeroTime(value[0]);
const formattedEnd = formatToZeroTime(value[1]);

时区注意事项 #

上述方法默认取当前运行环境的时区日期，如果你需要统一使用UTC时区的0点，将对应方法替换为UTC版本即可：

• date-fns使用startOfUTC方法，原生API替换为getUTCFullYear、getUTCMonth、getUTCDate
• dayjs/moment在格式化前调用.utc()方法即可

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