foreign-sapphire
foreign-sapphire14mo 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.
No description
5 Replies
kapa.ai
kapa.ai14mo 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
kapa.ai14mo 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
kapa.ai14mo ago
<@336843331416096768> kapa.ai is still learning and improving, please let us how it did by reacting below
rival-black
rival-black14mo 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
foreign-sapphire
foreign-sapphire14mo 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>
}
/>