基于antd 3.26 实现日期范围限制 随动禁止

2020-07-02  本文已影响0人  lessonSam

注意:基于3.26 和moment 实现

return (
                <RangePicker
                  style={{ width: '100%' }}
                  disabledDate={this.disabledDate}    // 禁止的回调函数
                  onCalendarChange={this.onCalendarChange} 点击日历的回调
                  onOpenChange={this.onRangePickerOpen}  // 弹出日历的回调
                  ranges={{
                    最近7天: [moment().add(-6, 'days'), moment()],
                    最近一月:[moment().add(-1, 'months'), moment()]
                  }}
                  showTime
                  format="YYYY-MM-DD"
                  
              />

1 处理

disabledDate = current => {
    const { firstChosenTime } = this.state
    // 可选值 大于当前时间 禁用
    // if (current.valueOf() > moment().valueOf()) {
    //   return true
    // }

    if (!firstChosenTime) {
      return false
    }

    if (
      this.getIsLtMonths(current, firstChosenTime) ||
      this.getIsGtMonths(current, firstChosenTime)
    ) {
      return true
    }

    return false
  }
   // 注意,这里复制出来的原因是:
  // 调用add或者subtract之类方法会修改state中firstChosenTime的值
  // less then
  getIsLtMounths = (momentA, momentB) => {
    return (
      momentA.valueOf() <
      momentB
        .clone()
        .subtract(1, 'months')
        .valueOf()
    )
  }

  getIsGtMonths = (momentA, momentB) => {
    return (
      momentA.valueOf() >
      momentB
        .clone()
        .add(1, 'months')
        .startOf('day')
        .valueOf()
    )
  }
  onRangePickerOpen = isRangePickerOpen => {
    if (isRangePickerOpen) {
      this.setState({
        firstChosenTime: undefined
      })
    }
  }

  onCalendarChange = chosen => {
    if (chosen && chosen.length === 1) {
      this.setState({
        firstChosenTime: chosen[0]
      })
    }
  }

上一篇 下一篇

猜你喜欢

热点阅读