React Hook Form搭配KeyboardDatePicker如何获取YYYY-MM-DD格式日期

报错原因 #

@date-io/date-fns是Material UI日期组件的适配工具包，仅封装了组件内部需要用到的日期方法，没有暴露原生date-fns的parseISO方法，因此直接调用实例的parseISO会报不存在的错误。

方案1：直接使用原生date-fns处理（更通用） #

首先确保你已经安装了date-fns依赖：

npm install date-fns
# 或者使用yarn
yarn add date-fns

在提交逻辑中直接导入date-fns的原生方法处理即可：

import { parseISO, format } from 'date-fns';

// onSubmit 逻辑示例
const rawDate = '2021-08-29T01:23:43.495Z'; // 从React Hook Form拿到的ISO格式日期
const formattedDate = format(parseISO(rawDate), 'yyyy-MM-dd');

方案2：使用已有的DateFnsUtils实例处理 #

如果你不想额外导入date-fns的方法，也可以用@date-io/date-fns实例自带的date方法替代parseISO的功能：

import DateFnsUtils from "@date-io/date-fns";
const dateFns = new DateFnsUtils();

// onSubmit 逻辑示例
const rawDate = '2021-08-29T01:23:43.495Z';
const dateObj = dateFns.date(rawDate); // 将ISO字符串转为Date对象
const formattedDate = dateFns.format(dateObj, "yyyy-MM-dd");

额外优化：选择日期时直接存储指定格式 #

如果不需要保留ISO格式的日期值，也可以在Controller层直接转换格式，后续从表单拿值时直接就是yyyy-MM-dd格式，不需要提交时二次处理：

<MuiPickersUtilsProvider utils={DateFnsUtils}>
  <Controller
    name="date_of_birth"
    control={control}
    defaultValue={new Date()}
    render={({ field: { ref, onChange, ...rest } }) => (
      <KeyboardDatePicker
        inputRef={ref}
        margin="dense"
        fullWidth
        id="date-picker-dialog"
        label="Date of Birth"
        format="yyyy-MM-dd"
        KeyboardButtonProps={{
          "aria-label": "change date",
        }}
        error={!!errors.date_of_birth}
        onChange={(date) => {
          // 选择日期时直接转成指定格式存入表单
          onChange(dateFns.format(date, 'yyyy-MM-dd'))
        }}
        {...rest}
      />
    )}
  />
</MuiPickersUtilsProvider>

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