Reactjs Mui Datepicker 设置了错误的日期

如果我理解正确的话，您希望使用MM/dd/yy作为日期格式，但结果始终是future 的日期.例如，如果你输入10/30/99，你想得到10/30/2099，而不是10/30/1999.

不幸的是，MUI X Date Picker没有内置的选项来实现这一点.它使用date-fns库来解析日期字符串.这与shortYearCutoff option of jQuery DatePicker类似.

根据date-fns documentation

YY将try 通过接近来猜测两位数年份的世纪 参考日期:

例如:

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

一种可能的解决方案是重写AdapterDateFns的parse方法.

例如:

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和今天之间的情况.在这种情况下，它将返回过go 的日期而不是future 的日期.

如果您只想获取future 的日期，则可以使用date-fns中的startOfDay和compareAsc方法.

例如:

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

您可以看到整个示例here.