Mui Datepicker устанавливает неправильную дату

Question

В настоящее время я использую библиотеку Mui Datepicker из@mui/x-date-pickers/DatePicker.

Вот мой пример кода

           <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>

Теперь я хотел бы использоватьMM/dd/yyв качестве формата даты. Но когда я набираю 30.10.99, он возвращает дату 30.10.1999. Хотелось бы вернуть 30.10.2099. Это происходит потому, что библиотека пытается предсказать ближайший год к 99 от текущей даты (базовой даты).

Есть ли способ гарантировать, что я получу только будущие даты? Таким образом, в этом случае вместо 1999 года возвращается 2099 год.

Я попробовал установитьminDate={new Date()}иdisablePast, но это не сработало.

ссылка на коды и коробку здесь

Заранее спасибо.

Answer 1

Если я правильно понимаю, вы хотите использоватьMM/dd/yyв качестве формата даты, но в результате всегда получается будущая дата. Например, если вы введете10/30/99, ты хочешь получить10/30/2099, нет10/30/1999.

К сожалению, в MUI X DatePicker нет встроенной возможности сделать это. Он использует библиотеку для анализа строки даты. Это похоже наshortYearCutoffопция jQuery DatePicker .

Согласно документации date-fns

yy попытается угадать век двухзначного года по близости с помощью referenceDate:

Например:

      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

Одним из возможных решений является переопределениеparseметодAdapterDateFns.

Например:

      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);
    };
  }
}

А потом:

      <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>;

---

ОБНОВЛЕННЫЙ ОТВЕТ

Он не обрабатывает случай, когда дата ввода находится между 01.01.23 и сегодняшним днем. В этом случае он вернет прошлую дату вместо будущей даты.

Если вы хотите получить только будущую дату, вы можете использоватьstartOfDayиcompareAscметоды изdate-fnsвместо.

Например:

      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;
    };
  }
}

Вы можете увидеть весь пример здесь .