reactjsmaterial-uidatepickerreact-hook-formmui-x-date-picker

Using react-hook-form with @mui/x-date-pickers v6


With MUI X v5 Date Pickets I used to do the following to register the input with react-hook-form

<DatePicker
    ...date picker props
    renderInput={(params) => {
        return (
            <TextField
                {...params}
                ...other text field props
                {...register("startDate", { required: true })}
            />
        );
    }}
/>

Now with MUI v6, the renderInput method is not present so I tried the following:

<DatePicker
    ...date picker props
    slotProps={{
        textField: {
            ...text field props,
            {...register("startDate", { required: true })}
        }
    }}
/>

Haven't been able to find a lot of documentation around this? Any help would be greatly appreciated.


Solution

  • I was able to get this working using a Controller

    <Controller
        name="startDate"
        control={control}
        rules={{ required: true }}
        defaultValue={null}
        render={({ field }) =>
            <DatePicker
                {...field}
                ...date picker props
                slotProps={{
                    textField: {
                        ...text field props
                    }
                }}
            />
        }
    />
    

    If anyone has another way to get this working without using a Controller please let me know.