如何使用 React Hook Form 和 Material UI 自定义 TextField 中的日期格式

Question

我正在使用

react-hook-form

和

@mui/material

的

TextField

组件来创建日期输入字段。目前，日期以

mm/dd/yyyy

格式显示。我想基于动态

dateFormat

属性自定义此格式。

这是我的代码的简化版本：

import { TextField } from "@mui/material";
import { Controller, useForm } from "react-hook-form";

export default function dateTimeValues(props) {
  const { control, formState } = formContext;

  const formContext = useForm({
    defaultValues: {
      dateTime: object?.dateTime?.slice(0, 10) || new Date().toISOString().slice(0, 10),
    },
  });

  useEffect(() => {
    reset({
      dateTime: object?.dateTime?.slice(0, 10) || new Date().toISOString().slice(0, 10),
    });
  }, [object, reset]);

  return (
    <Controller
      control={control}
      name="dateTime"
      render={({ field }) => {
        return (
          <TextField
            {...field}
            error={formState.errors.dateTime !== undefined}
            fullWidth
            helperText={formState.errors.dateTime && tGeneral("fieldRequired")}
            type="date"
            // I want to apply the dateFormat here
            format={dateFormat} // This doesn't work
          />
        );
      }}
      rules={{ required: true }}
    />
  );
}

dateFormat

属性可以有不同的值，如

YYYY/MM/DD

、

MMMM DD, YYYY

、

DD MMMM YYYY

等。

我尝试将

format

属性传递给

TextField

组件，但它不起作用。

如何使用

react-hook-form

和

@mui/material

实现所需的日期格式自定义？任何建议或替代方法将不胜感激。

Answer 1

它不起作用，因为

TextField

没有

format

道具。

要实现所需的日期格式，您应该使用 MUI X

 中的 

DateField 组件。

1. 安装相关包：

   npm install @mui/x-date-pickers
   

2. 导入并使用它：

   import { DateField } from '@mui/x-date-pickers/DateField';
   
   <DateField 
       label="Full letter month"
       format="MMMM DD, YYYY" 
   />