8

I am using Formik in my React project to process forms and using MUI UI components.

I am able to pick the day, month, but the year part does not change. If I manually type in year in the textfield, the year part is not reflected in the changed state.

Here's my code:

                 <LocalizationProvider dateAdapter={DateAdapter}>
                   <DatePicker
                     name="birthday"
                     id="birthday"
                     variant="standard"
                     label="Birthday"
                     value={formik.values.birthday}
                     renderInput={(params) => (
                       <TextField {...params} variant="standard" fullWidth/>
                     )}
                     onChange={(value) => formik.setFieldValue('birthday', value, true)}
                     error={formik.touched.birthday && Boolean(formik.errors.birthday)}
                     helperText={formik.touched.birthday && formik.errors.birthday}
                   />
                 </LocalizationProvider>

The initial state:

const initialFormState = {
  birthday: Date.now(),
};

All the other components are working correctly and changes in state show immediately.

2 Answers 2

7

For @mui-picker v6 I have implemented this solution

<LocalizationProvider dateAdapter={AdapterMoment}>
    <DatePicker
        disableFuture
        label="Date"
        format="DD/MM/YYYY"
        value={formik.values.date}
        onChange={(value) => formik.setFieldValue("date", value, true)}
        slotProps={{
            textField: {
                variant: "outlined",
                error: formik.touched.date && Boolean(formik.errors.date),
                helperText: formik.touched.date && formik.errors.date
            }
        }}
    />
</LocalizationProvider>

For more details, click here

1
  • Hi, Im doing the same for the error and helperText and still dont see the red line and helper for Datepicker, indeed is validating the controls because the submit is not happening if dates are wrong but dont see the validation error and helper. Any clue
    – VAAA
    Commented Feb 15 at 0:31
5

The onChange property is not set in the DatePicker component. You have to move the onChange property from TextField to DatePicker.

<LocalizationProvider dateAdapter={AdapterDateFns}>
   <DatePicker
      onChange={(value) => setFieldValue("birthday", value, true)}
      value={values.birthday}
      renderInput={(params) => (
      <TextField
        error={Boolean(touched.birthday && errors.birthday)}
        helperText={touched.birthday && errors.birthday}
        label="Birthday"
        margin="normal"
        name="birthday"
        variant="standard"
        fullWidth
        {...params}
       />
       )}
      />
  </LocalizationProvider>

Also, the name, id, variant and label are TextField's properties.

Here is the working CodeSandbox link.

6
  • I made the changes as you suggested in the sample code but there is still the same problem. Let's say I choose a certain date, when I submit the form submits with the current date regardless of what date I choose. The onChange for some reason is not saving the changes in state so I suppose the initial date from Date.now() gets submitted instead. No where in my code I am changing the date to current date.
    – Dream Big
    Commented Mar 14, 2022 at 11:05
  • @DreamBig could you please share your code as reproducible at codesandbox?
    – SelvaS
    Commented Mar 14, 2022 at 11:58
  • This is not the first time I am having the same issue with Pickers. I had to include all the fields in the sandbox as just the birthday field by itself was not reproducing the bug. Thanks in advance!
    – Dream Big
    Commented Mar 14, 2022 at 14:20
  • @DreamBig the issue is not from DatePicker or Formik. It is from date conversion. user.birthday = Date(user.birthday); change this line into user.birthday = new Date(user.birthday);. It will work. You should create date with new Date() constructor.
    – SelvaS
    Commented Mar 14, 2022 at 15:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.