动态设置时间禁用范围 - davy-gan/web GitHub Wiki

import { DatePicker } from 'antd';
const { RangePicker } = DatePicker;

class DateRange extends React.Component {
  state = {
    startValue: null,
  };

  disabledDate = current => {
    // Can not select days before today and today
    // console.log(current.format('YYYYMMDD'))
    if (!this.state.startValue) {
      return false;
    }
    console.log(
      this.state.startValue.format('YYYYMMDD'),
      moment(this.state.startValue)
        .add(-1, 'months')
        .format('YYYYMMDD'),
    );
    return (
      current &&
      (current <
        moment(this.state.startValue)
          .add(-1, 'months')
          .endOf('day') ||
        current >
          moment(this.state.startValue)
            .add(1, 'months')
            .endOf('day'))
    );
  };
  onCalendarChange = (dates, dateStrings) => {
    console.log(dates, dateStrings);
    if (dates[0]) {
      this.setState({
        startValue: dates[0],
      });
    }
  };
onOpenChange=()=>{
  this.setState({
        startValue: null,
      });
}
  render() {
    return (
      <div>
        <RangePicker
          disabledDate={this.disabledDate}
          onCalendarChange={this.onCalendarChange}
          onOpenChange={this.onOpenChange}
          format="YYYY-MM-DD"
        />
      </div>
    );
  }
}

ReactDOM.render(<DateRange />, mountNode);