在 Popover 中 React Datepicker 显示前一年

如何解决在 Popover 中 React Datepicker 显示前一年

我正在使用 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}
      />
    );
  }
}

解决方法

我找到了在弹出窗口中显示所需年份的道具。 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}
      />

,

这是文档中将默认日期设置为 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)
    }