Mui Datepicker sets incorrect date

Question

I am currently using Mui Datepicker library from @mui/x-date-pickers/DatePicker.

Here's my sample code

     <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DatePicker
        inputFormat="MM/dd/yy"
        value={date}
        minDate={new Date()}
        disablePast
        onChange={(newValue) => {
          console.log("new value", newValue)
          setDate(newValue);
        }}
        renderInput={(props) => (
          <TextField
            autoFocus
            size="small"
            {...props}
            inputProps={{
              ...props.inputProps,
              autocomplete: 'off',
              placeholder: 'MM/DD/YY',
            }}
          />
        )}
      />
    </LocalizationProvider>

Now, I would like to use MM/dd/yy as the date format. But when I type in 10/30/99, it returns a date 10/30/1999. I would like it to return 10/30/2099. It is happening because the library is trying to predict the nearest year to 99 from the current date (reference date).

Is there a way to ensure I only get future dates. So in this case it returns the year 2099 instead of 1999.

I tried setting minDate={new Date()} and disablePast, but it didn't work.

codesandbox link here

Thanks in advance.

Could you please reproduce this error in the codesandbox? This would help me and other readers understand the problem better and find a solution faster. — Pluto, Jul 23 '23 at 20:26

Pluto · Accepted Answer · 2023-07-26T11:26:30.123

If I understand correctly, you want to use MM/dd/yy as the date format, but always get a future date as the result. For example, if you type in 10/30/99, you want to get 10/30/2099, not 10/30/1999.

Unfortunately, the MUI X DatePicker does not have a built-in option to do that. It uses the date-fns library to parse the date string. This is similar to the shortYearCutoff option of jQuery DatePicker.

According to date-fns documentation

yy will try to guess the century of two digit year by proximity with referenceDate:

For example:

console.log(parse("11/11/99", "MM/dd/yy", new Date())); // 1999-11-11
console.log(parse("11/11/73", "MM/dd/yy", new Date())); // 1973-11-11
console.log(parse("11/11/72", "MM/dd/yy", new Date())); // 2072-11-11
console.log(parse("11/11/50", "MM/dd/yy", new Date())); // 2050-11-11
console.log(parse("11/11/7", "MM/dd/yy", new Date()));  // 2007-11-11

One possible solution is to override parse method of AdapterDateFns.

For example:

class FutureDateAdapter extends AdapterDateFns {
  constructor(props = {}) {
    super(props);
    this.parse = (value, formatString) => {
      if (value === null) {
        return null;
      }
      const date = new Date();
      const newDate = addYears(date, 50);
      return parse(value, formatString, newDate);
    };
  }
}

And then:

<LocalizationProvider dateAdapter={FutureDateAdapter}>
  <DatePicker
    inputFormat="MM/dd/yy"
    value={date}
    onChange={setDate}
    renderInput={(props) => (
      <TextField
        autoFocus
        size="small"
        {...props}
        inputProps={{
          ...props.inputProps,
          autoComplete: "off",
          placeholder: "MM/DD/YY",
        }}
      />
    )}
  />
</LocalizationProvider>;

UPDATED ANSWER

It does not handle the case when the input date is between 01/01/23 and today. In that case, it will return the past date instead of the future date.

If you want to get only the future date, you can use the startOfDay and compareAsc methods from date-fns instead.

For example:

class FutureDateAdapter extends AdapterDateFns {
  constructor(props = {}) {
    super(props);
    this.parse = (value, formatString) => {
      if (value === null) {
        return null;
      }

      const newDate = new Date();
      const parsedDate = parse(value, formatString, newDate);
      const today = startOfDay(newDate);
      if (compareAsc(parsedDate, today) === -1) {
        return addYears(parsedDate, 100);
      }
      return parsedDate;
    };
  }
}

You can see the whole example here.

@PraveenKumar, You're welcome, I'm glad to work as expected. — Pluto, Jul 25 '23 at 14:23
Ok, there's a small issue with this. for inputs starting from 01/02/23 to today, it won't set the year as 2123. Instead if sets the past date itself. So I modified it slightly to cover that. `const parsedDate = parse(value, formatString, newDate); if(isBefore(parsedDate.setHours(0,0,0,0), new Date().setHours(0,0,0,0))){ return addYears(parsedDate, 100) } return parsedDate;` — Praveen Kumar, Jul 26 '23 at 07:56
Thank you for your comment and feedback. I appreciate your effort to improve my solution. - @PraveenKumar. You are right, there is a small issue with my code. Your modification is a good way to fix that issue. However, I noticed that your code uses `setHours` and `isBefore` methods, which are not part of `date-fns` library. They are part of JavaScript Date object. This may cause some confusion or inconsistency when using `AdapterDateFns`, which is supposed to use `date-fns` methods only. So I updated my answer. Please check it. — Pluto, Jul 26 '23 at 11:29

Mui Datepicker sets incorrect date

1 Answers1

UPDATED ANSWER