ratty-blush•16mo ago

How to use MUI Datepicker on update page

I want to use mui datepicker on my update page. i want to convert the textfield into datepicker. but when I changed it, the update method wont read the value from the datepicker, and the validator wont validate the null value on the datepicker.

5 Replies

kapa.ai•16mo ago

Hi @regnregn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•16mo ago

---------------------- Hmm, I don't know enough to give you a confident answer yet. However, you can refer to the refine documentation (https://refine.dev/docs) for more information on using different components and hooks. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

Overview | refine

What is refine?

kapa.ai•16mo ago

<@336843331416096768> kapa.ai is still learning and improving, please let us how it did by reacting below

constant-blue•16mo ago

Hey @regnregn, The problem may related with react-hook-form. I am not sure why why it doesn’t work. If you provide a codesandbox, I will check it out

ratty-blush•16mo ago

Hi, thanks for checking it out. After some research and testing, I've managed to do this by using Controller and setValue from react-hook-form

<Controller
          name="deposit_date"
          control={control}
          render={
            ({ field: { onChange, value } }) =>
              <LocalizationProvider dateAdapter={AdapterDayjs}>
                <DatePicker
                  value={dayjs(value)}
                  label="Deposit Date"
                  onChange={(e) => {
                    onChange(e)
                    setValue('deposit_date', dayjs(e).format("YYYY-MM-DD"))
                  }}
                />
              </LocalizationProvider>
          }
        />

<Controller
          name="deposit_date"
          control={control}
          render={
            ({ field: { onChange, value } }) =>
              <LocalizationProvider dateAdapter={AdapterDayjs}>
                <DatePicker
                  value={dayjs(value)}
                  label="Deposit Date"
                  onChange={(e) => {
                    onChange(e)
                    setValue('deposit_date', dayjs(e).format("YYYY-MM-DD"))
                  }}
                />
              </LocalizationProvider>
          }
        />