How do I use react-hook-form Controller in a Mui (V5.10) Date picker?

[DanPresa]

How to use the rhf control in a Date picker field?
I'm trying to get a date but I haven't been able to get it when I put the controller.
Please help.

[Moshyfawn]

Take a look at this codesandbox

<Controller
  control={control}
  name="date"
  rules={{
    validate: {
      min: (date) => isFuture(date) || "Please, enter a future date"
    }
  }}
  render={({ field: { ref, onBlur, name, ...field }, fieldState }) => (
    <DatePicker
      {...field}
      inputRef={ref}
      label="Date"
      renderInput={(inputProps) => (
        <TextField
          {...inputProps}
          onBlur={onBlur}
          name={name}
          error={!!fieldState.error}
          helperText={fieldState.error?.message}
        />
      )}
    />
  )}
/>

[Moshyfawn]

No worries! I know the feeling ;)

[sidneywidmer]

reset doesn't seem to work with this approach 🤔

[rayson1223]

anyone can get it work with LocalizationProvider & Luxon Adapter? It driving me crazy as well

[pranavgoel29]

Any update to get it working with LocalizationProvider?
Kindly provide a resource or reference point if a means exists to accomplish it.

[bablukpik]

Now renderInput prop has been deprecated with slotProps in the latest version of MUI. It almost works except for hiding the error of the helper text while selecting the correct date. Let's update the above sandbox's code and imagine today is 11 July 2023 if I try to submit it's supposed to show the error message but if I select the right one it should hide the error message after selecting but it's not working.

Here is the condesandbox link where I tried.

Hi @bluebill1049 Could you please take a look ASAP and take some necessary actions?

[mrjaysonwong]

just addition, if a user can save with no value and for the initial value that won't trigger highlight error on its textField you can simply add conditional to defaultValue props >
defaultValue={ dateObject ? dayjs(dateObject) : null }

import { useContext } from 'react';
import { Grid, InputLabel } from '@mui/material';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { Controller } from 'react-hook-form';
import { FormDetailsContext } from '..';
import dayjs from 'dayjs';

export default function DateOfBirth() {
  const { control, userData, errors } = useContext(FormDetailsContext);

  const dateObject = userData?.dateOfBirth;

  return (
    <>
      <Grid item xs={12} sm={6}>
        <InputLabel id="date-of-birth-picker">Date of Birth</InputLabel>
        <LocalizationProvider dateAdapter={AdapterDayjs}>
          <Controller
            name="dateOfBirth"
            id="date-of-birth-picker"
            control={control}
            defaultValue={dateObject ? dayjs(dateObject) : null}
            render={({ field }) => (
              <DatePicker
                id="date-of-birth-picker"
                name={field.name}
                disableFuture
                onChange={field.onChange}
                value={field.value}
                sx={{ width: '100%' }}
                {...field}
              />
            )}
          />
        </LocalizationProvider>
      </Grid>
    </>
  );
}

[abhishekpurecode]

To integrate react-hook-form with Material-UI (v5.10) DatePicker, use the Controller component from react-hook-form. Wrap the DatePicker component inside Controller, specifying the render prop for rendering and providing name and control props. Ensure the defaultValue attribute corresponds to the initial date value. Example code snippet:
jsxCopy code
<Controller name="datePicker" control={control} defaultValue={null} render={({ field }) => ( <DatePicker {...field} label="Select Date" onChange={(date) => field.onChange(date)} value={field.value} // Add other DatePicker props as needed /> )} />
This integrates react-hook-form with Material-UI's DatePicker, allowing seamless form

To know more, read here: https://purecode.ai/blogs/mui-select/