DatePicker value is not being read upon submit.

I'm using DatePicker from Material UI with DayJs adapter. https://mui.com/x/react-date-pickers/date-picker/

import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers-pro';
import dayjs, { Dayjs } from 'dayjs';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';

And being submitted via useModalForm hook.

const createDrawerFormProps = useModalForm<ICurrencyRate, HttpError, ICurrencyRate>({
    refineCoreProps: {
      action: "create",
      resource:

currency-rates

,
      redirect: false,
      onMutationSuccess: () => {
        tableQueryResult.refetch();
      }
    },
    warnWhenUnsavedChanges: true,
    modalProps: {
      autoSubmitClose: true,
      autoResetForm: true,
    },
  });

Anyone have any idea what is wrong in my code? I'm new to refine and react as well. Appreciate your help. Thanks!

React Date Picker component - MUI X

The date picker let the user select a date.

2 Replies

Omer•3y ago

Hey @Jams 👋 , Thank you for contacting us! This seems to be a Material UI and React Hook Form issue. Have you looked at this question? https://stackoverflow.com/questions/72842158/material-ui-mui-date-picker-with-react-hook-form

Stack Overflow

Material UI (MUI) date picker with react-hook-form

I'm creating a form which has a date field. I'm using MUI and react-hook-form for validation. I've tried to render the field in two different ways, but when submitting my form I'm not getting the

narrow-beigeOP•3y ago

Thanks @Omer for your quick response. Yeah, it seems that it is indeed the issue. Issue has been solved. Attached is my changes. Cheers!