How to use react-hook-form Controller with the new Mui (V6) Date picker?

[itayperry]

Hi everyone,
I have a tiny question and I'd be happy to get some help :)
I've been trying to use react-hook-form with MUI version 6 DateTimePicker component, but renderInput prop seems to no longer exist.
Does anyone know how can it be done? ✨

Here's the DateTimePicker component: https://mui.com/x/react-date-pickers/date-time-picker/

Here's the DateTimePicker API: https://mui.com/x/api/date-pickers/date-time-picker/

[Sajarin-M]

You can use the Controller component, like:

const { control, handleSubmit } = useForm({
  defaultValues: {
    date: null as Dayjs | null
  }
});

/*........*/

<Controller
  control={control}
  name="date"
  rules={{ required: true }}
  render={({ field }) => {
    return (
      <DateTimePicker
        label="Date"
        value={field.value}
        inputRef={field.ref}
        onChange={(date) => {
          field.onChange(date);
        }}
      />
    );
  }}
/>

CSB Demo

[itayperry]

Don't I need the <TextField>?

[Sajarin-M]

No, if you don't need to use your own custom input component.
DateTimePicker uses mui TextField internally. You can pass props to the inner TextField by using slotProps

<DateTimePicker
  slotProps={{
    textField: {
      variant: "filled",
      size: "small"
    }
  }}
/>

Read more about customization.

[itayperry]

Thank you! @Sajarin-M
That's what I did:

.
.
.
const { watch, control } = useFormContext<SearchForm>();
.
.
.
  <Controller
    control={control}
    defaultValue={dayjs().startOf("D")}
    name="startDate"
    rules={{
      required: {
        value: true,
        message: "Start date is required",
      },
    }}
    render={({ field: { onChange, value, ref } }) => (
      <DateTimePicker
        label="Start Date"
        disableFuture
        onChange={onChange}
        onAccept={onChange}
        value={value}
        inputRef={ref}
      />
    )}
  />

[phani1585]

with this onBlur is not working, even though im sending through the slot props

[Priyeshvaghela77]

I'm using this with react hook form too but when there is any validation error the control doesn't go to the datepicker. The field is not focused when we click submit and we have any error with it.

Am I missing something here?

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 { Control, FieldValues, Controller } from "react-hook-form";
import dayjs from "dayjs";

interface CustomDatePickerProps<T> {
  name: Extract<keyof T, string>;
  control: any;
  error?: boolean;
  helperText?: string;
  defaultValue: any;
  onDateChange?: any;
}

const CustomDatePicker = <T,>({
  name,
  control,
  error,
  helperText,
  defaultValue,
  onDateChange,
  ...rest
}: CustomDatePickerProps<T>) => {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <div className={"mui-date"}>
        <Controller
          name={name}
          control={control as Control<FieldValues, any>}
          defaultValue={defaultValue}
          render={({ field: { onChange, value } }) => (
            <DatePicker
              value={value ? dayjs(value) : null}
              onChange={onChange}
              slotProps={{
                actionBar: {
                  actions: ["today", "accept"],
                },
                textField: {
                  error: error,
                  helperText: helperText,
                },
              }}
              {...rest}
            />
          )}
        />
      </div>
    </LocalizationProvider>
  );
};

export default CustomDatePicker;

```

[phani1585]

you should provide the ref to Datepicker
<DatePicker
label={label}
disabled={disabled}
format="DD/MM/YYYY"
slotProps={{
textField: {
required: required,
error: !!error,
helperText: error?.message,
onBlur: field.onBlur,
...textFieldProps,
},
}}
onAccept={field.onBlur}
onChange={handleDateChange}
value={dayjs(field.value)}
inputRef={field.ref}
minDate={isPrevDisabled()}
{...rest}
/>

[ihlavsya]

when i check what is the data in handleSubmit, i am getting old value for datepicker. i also have to mention that i use setValue to set the formdata with info from redux store. wihtout using setValue everything works fine.

[phani1585]

why you are using setValue when you can simply set the default values

[isrark005]

import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
import { Controller } from 'react-hook-form';
import dayjs from 'dayjs';
import { TextField } from '@mui/material';

interface BasicTimePickerProps {
  control: any;
  name: string;
  label: string;
}

export default function BasicTimePicker({ control, name, label }: BasicTimePickerProps) {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Controller
        name={name}
        control={control}
        render={({ field: { onChange, value } }) => (
          <TimePicker
            
            label={label}
            value={value ? dayjs(value, 'HH:mm A') : null}
            onChange={(time) => onChange(time ? time.format('HH:mm A') : '')} 
            slots={{
                textField: textFieldProps => <TextField {...textFieldProps} />
              }}            
            ampm
          />
        )}
      />
    </LocalizationProvider>
  );
}

this is what worked for me

[Norlandz]

Idk maybe the key is change value={field.value} to value={dayjs(field.value)}

                <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="fr">
                  <DatePicker
                    value={dayjs(field.value)}
                    inputRef={field.ref}
                    onChange={(date) => {
                      field.onChange(date);
                    }}
                  />
                </LocalizationProvider>