Skip to content

Issue in Material UI keyboard date picker for type a value

what happens if I select a date by clicking on the calendar it works fine but if the first time I set a date to empty and I will type the date it will not react like date format its go like 11111111111111111111 like this so its break the format of date but if I select from the calendar after that I will edit it work fine only first time if I will edit direct type it goes wrong.

<MuiPickersUtilsProvider utils={DateFnsUtils}>
      <Grid container justifyContent="space-around">
        <KeyboardDatePicker
          disableToolbar
          variant="inline"
          format="MM/dd/yyyy"
          margin="normal"
          id="date-picker-inline"
          label="Date picker inline"
          value={formik.values.dob}
          onChange={handleChangeDate}
          KeyboardButtonProps={{
            "aria-label": "change date"
          }}
        />
      </Grid>
    </MuiPickersUtilsProvider>

Code SandBox link

Answer

I found this example, that seems to do exactly what you are trying to do. Does it helps ?