How to customize date format in TextField using React Hook Form and Material UI

Question

I'm using react-hook-form and @mui/material's TextField component to create a date input field. Currently, the date is displayed in the mm/dd/yyyy format. I want to customize this format based on a dynamic dateFormat prop.

Here's a simplified version of my code:

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

The dateFormat prop can have different values like YYYY/MM/DD, MMMM DD, YYYY, DD MMMM YYYY, etc.

I've tried passing the format prop to the TextField component, but it doesn't work.

How can I achieve the desired date format customization using react-hook-form and @mui/material? Any suggestions or alternative approaches would be greatly appreciated.

Ron Zano · Accepted Answer · 2024-08-16 22:11:23Z

0

It's not working because TextField doesn't have a format prop.

To achieve the desired date format, you should use the DateField component from MUI X.

Install the relevant package:
```
npm install @mui/x-date-pickers
```

Import and use it:

import { DateField } from '@mui/x-date-pickers/DateField';

<DateField 
    label="Full letter month"
    format="MMMM DD, YYYY" 
/>

answered Aug 16, 2024 at 22:11

Ron Zano

6521 gold badge10 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to customize date format in TextField using React Hook Form and Material UI

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related