React Datepicker 在 Popover 中显示上一年

Question

我正在使用https://reactdatepicker.com/

现在默认开始日期是当前日期。我希望开始日期是 1970 年的开始年份。我不想禁用以前的日期，只是希望日历显示日期为 1970 年 1 月 1 日，以便用户可以选择出生日期。

这是我当前的代码：

class ReactDatePicker extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: new Date() - 80
    }
    this.datepickerRef = React.createRef();
  }

  setDate = date => {
    this.props.onChange(this.props.name, date);
  };

  handleClickDatepickerIcon = () => {
    const datepickerElement = this.datepickerRef;
    datepickerElement.setFocus(true);
  }

  render() {
    const { name, value } = this.props;

    return (
      <Datepicker 
        id={name}
        name={name}
        selected={value}
        onChange={this.setDate}
        startDate={this.state.startDate}
        maxDate={new Date()}
        popperPlacement="bottom"
        dateFormat="MMMM d, yyyy"
        showMonthDropdown="true"
        showYearDropdown="true"
        placeholderText="Select a date"
        ref={el => this.datepickerRef = el}
      />
    );
  }
}

Answer 1

我找到了在弹出窗口中显示所需年份的道具。 openToDate={新日期（“1970/01/1”）} 所以最终的代码是

<Datepicker 
        id={name}
        name={name}
        selected={value}
        onChange={this.setDate}
        startDate={this.state.startDate}
        maxDate={new Date()}
        popperPlacement="bottom"
        dateFormat="MMMM d, yyyy"
        showMonthDropdown="true"
        showYearDropdown="true"
        placeholderText="Select a date"
        openToDate={new Date("1960/01/1")}
        ref={el => this.datepickerRef = el}
      />

Answer 2

以下是文档中将默认日期设置为 1970 年 1 月 1 日的示例。

    () => {
  const [startDate, setStartDate] = useState(new Date(null));
  return (
    <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
  );
};

我只是在日期中添加了 null 作为参数，因此创建了一个日期为 01/01/1970 的日期对象。

在你的例子中，你可以这样做：

this.state = {
      startDate: new Date(null)
    }