How to Add Date picker field in your react form using MUI

 The DatePicker component let the user select a date, from the dropdown

Dependencies

npm install @mui/x-date-pickers/AdapterDayjs

npm install @mui/x-date-pickers/LocalizationProvider

npm install @mui/x-date-pickers/DatePicker

The date picker is rendered as a modal dialog on mobile, and a textbox with a popup on desktop.

<LocalizationProvider id dateAdapter={AdapterDayjs}>

    <Controller name="issueDate"

                control={control}

                defaultValue={null}

                render={({

                          fieldState: { invalid }

                        }) => (

                             <DatePicker

                                disableFuture

                                openTo="year"

                                views={['year', 'month', 'day']}

                                value={formData.invoiceData.issueDate}

                                onChange={(e) => handleHeaderInputChange(e,"issueDate"

)}

                                 renderInput={(params) =>

                                            <TextField {...params}

                                                       error={invalid}

                                                       sx={{ bgcolor: 'white'}}

                                                       size="small" />}

                                  />

                                  )}

      />

</LocalizationProvider>

LocalizationProvider : Use LocalizationProvider to change the date-library locale that is used to render pickers. It uses prop dateAdapter to pass which date management library it should use. Here we have used AdapterDayjs.

Controller : In order to control MUI Text Field, React Hook Form uses Controller, which can easily integrate with any third-party-controlled UI components. Controller component  wrapper allows you to register a controlled external component, similar to how the register method works. In this case, instead of the register method, you will use the control object from the useForm Hook.

DatePicker : In DatePicker you pass the TextField  in renderInput props.