ant design datepicker处理日期范围操作

我是歌谣放弃很容易但是坚持一定很酷微信公众号关注前端小歌谣学习前端知识

1需求

此刻日期之前的不能选择当天日期结束时间比开始时间打

基本样式

   <Row gutter={12}>
                <Col span={12}>
                  <Form.Item label="活动开始时间">
                    {getFieldDecorator('startTimeLong', {
                      rules: [{ required: true, message: '活动开始时间不能为空'
                       }],
                    })(
                      <DatePicker
                        format="YYYY-MM-DD HH:mm"
                        onChange={this.onChangeStart}
                        disabledDate={this.handleDataPick}
                        disabledTime={this.disabledDateTime}
                        showTime={{
                          format: 'HH:mm',
                        }}
                      />
                    )}
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={12}>
                <Col span={12}>
                  <Form.Item label="活动结束时间">
                    {getFieldDecorator('endTimeLong', {
                      rules: [{ required: true, message: '活动结束时间不能为空'
                       }],
                    })(
                      <DatePicker
                        format="YYYY-MM-DD HH:mm"
                        onChange={this.downChange}
                        disabledDate={this.handleDataPickEnd}
                        disabledTime={this.disabledDateTimeend}
                        showTime={{
                          format: 'HH:mm',
                        }}
                      />
                    )}
                  </Form.Item>
                </Col>
              </Row>

定义方法

  //活动开始时间
  onChangeStart = (value) => {
    this.setState({
      startValue: value,
    });
  };
  //活动结束时间
  downChange = (value) => {
    this.setState({
      endValue: value,
    });
  };
  range = (start, end) => {
    console.log(start, end);
    const result = [];
    for (let i = start; i < end; i++) {
      result.push(i);
    }
    return result;
  };
  disabledStartDate = (startValue) => {
    const endValue = this.state.endValue;
    const startValues = this.state.startValue;
    let day = endValue ? new Date(endValue).setHours(0, 0, 0, 0) : 0;
    let dayStart = startValues ? new Date(startValues).setHours(0, 0, 0, 0) 
    : 0;
     if (!endValue) {
       return;
     }
    return day < moment(startValue).startOf('day')
     || dayStart > moment(startValue).startOf('day');
  };
  disabledEndDate = (startValue) => {
    const endValue = this.state.endValue;
    const startValues = this.state.startValue;
    let day = endValue ? new Date(endValue).setHours(0, 0, 0, 0) : 0;
    let dayStart = startValues ? new Date(startValues).setHours(0, 0, 0, 0)
     : 0;
     if (!endValue) {
       return;
     }
    return day < moment(startValue).startOf('day') || 
    dayStart > moment(startValue).startOf('day');
  };
  //时分限制
  disabledDateTime = (data) => {
    const hours = moment(this.state.endValue).format('HH:mm:ss');
    const time = moment(this.state.endValue).format('YYYY-MM-DD');
    const currentTime = moment(data).format('YYYY-MM-DD');
    if (time === currentTime) {
      return {
        disabledHours: () => this.range(parseInt(hours.slice(0, 2))
         + 1, 24),
        disabledMinutes: () => this.range(parseInt(hours.slice(3, 5)),
         60),
      };
    }
  };
  //时分限制
  disabledDateTimeend = (data) => {
    const hours = moment(this.state.startValue).format('HH:mm:ss');
    const time = moment(this.state.startValue).format('YYYY-MM-DD');
    const currentTime = moment(data).format('YYYY-MM-DD');
    if (time === currentTime) {
      return {
        disabledHours: () => this.range(0, parseInt(hours.slice(0, 2))),
        disabledMinutes: () => this.range(0, parseInt(hours.slice(3, 5))
         + 1),
      };
    }
  };
  handleDataPick = (startValue) => {
    const time = new Date().getTime() - 24 * 60 * 60 * 1000;
    let data = moment(time);
    return data > moment(startValue).startOf('day');
  };
  handleDataPickEnd = (startValue) => {
    let startValues = new Date(this.state.startValue).getTime() - 
    24 * 60 * 60 * 1000;
    let data = moment(startValues);
    return data > moment(startValue).startOf('day');
  };