javascript - 创建一个函数，防止在 React Date Picker 中选择特定日期之前的不同日期

Question

例如，this.state.endDate = new Date("2019-07-12 15:00:00 + 00 ")。我的目标:阻止在日期选择器中选择早于或等于 this.state.endDate 的日期的可能性(this.state.endDate 中的日期将会改变) 。到目前为止，我设法阻止了选择比当前日期更早的日期的可能性。但是，我在将其设置为不与当前日期比较而是与 this.state.endDate 比较时遇到问题。我使用这个库:https://www.npmjs.com/package/react-datepicker

此处代码:https://stackblitz.com/edit/react-rt4tzm

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import moment from 'moment';


class App extends Component {
  constructor() {
    super();
    this.state = {
      selected: new Date(),
      minTime: this.calculateMinTime("2019-07-12 15:00:00+00"),
      endDate: new Date()
    };
  }

  componentDidMount() {
    this.setState({
      endDate: new Date("2019-07-12 15:00:00+00")
    })
  }

  calculateMinTime = date => {
    let isToday = moment(date).isSame(moment(), 'day');
    if (isToday) {
        let nowAddOneHour = moment(new Date()).add({hours: 1}).toDate();
        return nowAddOneHour;
    }
    return moment().startOf('day').toDate(); 
}

  handle = (date) => {
    this.setState({
      selectedDate: date,
      minTime: this.calculateMinTime(date)
    })
  }

  render() {
    console.log(this.state.endDate)
    return (
      <div>
         <DatePicker
            selected={this.state.selected}
            onChange={this.handle}
            excludeOut
            showTimeSelect
            timeFormat="HH:mm"
            timeIntervals={15}
            dateFormat="MMMM d, yyyy h:mm aa"
            timeCaption="time"
            minDate={new Date()}
            minTime={this.state.minTime}
            maxTime={moment().endOf('day').toDate()}
          />
      </div>
    );
  }
}

Answer 1

您需要设置 minDate={this.state.endDate} 。这将阻止用户选择 endDate 之前的任何日期。