如何让MUI DatePicker结合react-hook-form存储DD/MM/YYYY格式日期？

我实现了一个集成react-hook-form与Material UI DatePicker的组件，但表单存储的日期值是类似"2024-04-10T22:00:00.000Z"的ISO格式字符串，希望改成DD/MM/YYYY格式的字符串存储，原代码如下：

import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { Control, Controller } from "react-hook-form";
import { FormType } from "./Context";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";

type FormInputProps = {
    name: any;
    control: Control<FormType, any>;
    label: string;
};

export const FormDatePicker = ({ name, control, label }: FormInputProps) => {
    return (
        <LocalizationProvider dateAdapter={AdapterDayjs}>
            <Controller
                name={name}
                control={control}
                render={({ field: { onChange, value } }) => (
                    <DatePicker
                        slotProps={{
                            field: { clearable: true },
                        }}
                        label={label}
                        value={value}
                        format="DD/MM/YYYY"
                        onChange={onChange}
                    />
                )}
            />
        </LocalizationProvider>
    );
};

解决方案： #

核心是在onChange回调中把DatePicker返回的dayjs对象格式化为目标字符串，同时处理表单值到组件可用格式的转换，修改后的代码如下：

import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { Control, Controller } from "react-hook-form";
import { FormType } from "./Context";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import dayjs from "dayjs"; // 确保已安装并引入dayjs

type FormInputProps = {
    name: any;
    control: Control<FormType, any>;
    label: string;
};

export const FormDatePicker = ({ name, control, label }: FormInputProps) => {
    return (
        <LocalizationProvider dateAdapter={AdapterDayjs}>
            <Controller
                name={name}
                control={control}
                render={({ field: { onChange, value } }) => (
                    <DatePicker
                        slotProps={{
                            field: { clearable: true },
                        }}
                        label={label}
                        // 将存储的字符串解析为dayjs对象供组件显示
                        value={value ? dayjs(value, 'DD/MM/YYYY') : null}
                        format="DD/MM/YYYY"
                        // 将dayjs对象格式化为指定字符串后存入表单
                        onChange={(date) => {
                            onChange(date ? date.format('DD/MM/YYYY') : null);
                        }}
                    />
                )}
            />
        </LocalizationProvider>
    );
};

关键修改点说明： #

1. 格式化存储值：MUI DatePicker的onChange返回的是dayjs实例，通过date.format('DD/MM/YYYY')将其转换为目标格式的字符串，再传递给react-hook-form的onChange方法，确保表单存储的是指定格式的字符串。
2. 解析显示值：当表单已有DD/MM/YYYY格式的字符串值时，用dayjs(value, 'DD/MM/YYYY')解析为dayjs对象，才能被DatePicker正确识别并渲染；若值为空则传递null。
3. 依赖检查：确保已安装dayjs包（执行npm install dayjs），因为AdapterDayjs依赖它处理日期逻辑。

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