DD/MM/YYYY 格式与 MUI DatePicker 和react-hook-form

Question

我编写了这个 datePicker 组件来集成react-hook-form和Material UI，但作为示例，我得到的值格式如下：“2024-04-10T22：00：00.000Z”

这是代码：

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>
    );
};

如何才能使值以 DD/MM/YYYY 的字符串格式存储？

Answer 1

为了确保表单中存储的值采用 DD/MM/YYYY 的字符串格式，您需要先格式化所选日期，然后再将其传递给react-hook-form的 onChange 处理程序，您可以尝试以下操作：

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"; // Import dayjs for date formatting

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={(date) => {
                            // Convert selected date to the desired format
                            const formattedDate = dayjs(date).format("DD/MM/YYYY");
                            // Pass the formatted date to react-hook-form's onChange
                            onChange(formattedDate);
                        }}
                    />
                )}
            />
        </LocalizationProvider>
    );
};