Ant Design的DatePicker組件禁用日期選擇範圍(結束日期大於開始日期)禁用狀態

1、日期選擇框在這裏插入圖片描述
2、

 <DatePicker
              disabledDate={this.disabledRegistrationStartDate}
              //這裏是設置時間選擇範圍 和禁用狀態
              //showTime={{defaultValue:moment(currentTimeFormat,'HH:mm')}}
              //showTime去掉表示不需要選擇時間 時間選擇默認爲年月日
              format="YYYY-MM-DD"
              //設置日期格式
              value={startDate}
              placeholder="開始時間"
              onChange={this.handleRegistrationStartDateChange}
              onOpenChange={this.handleStartOpenChange}
            />
              ~
            <DatePicker
              disabledDate={this.disabledRegistrationEndDate}
              //showTime={{defaultValue:moment(currentTimeFormat,'HH:mm')}}
              format="YYYY-MM-DD"
              disabled={!startDate}
              value={endDate}
              placeholder="結束時間"
              onChange={this.handleRegistrationEndDateChange}
              open={registrationEndOpen}
              onOpenChange={this.handleEndOpenChange}
            />

3、已結束時間爲例
在disabledDate這個配置項對應的方法中,如果返回的是false,則可以選擇時間,返回true則無法對時間進行選擇,這一結論至關重要

// 結束時間選擇
  disabledRegistrationEndDate = endDate => {
    // endReviewDate截止審覈時間
    const { startDate,endReviewDate } = this.state;
    if(endReviewDate && endDate.valueOf() > endReviewDate.valueOf()){
      return true;
    }
    return endDate < moment(startDate).add(1, 'days');
    //禁用選擇範圍爲開始時間加一天
  }

4、報名結束時間事件處理
注意這裏的時間需要使用MomentMoment進行格式轉換
在這裏插入圖片描述

handleRegistrationEndDateChange = value => {
    if(value === null){
      return this.handleDateChange('endDate', value);
    }
    const { startDate,endReviewDate } = this.state;
    if(startDate && (startDate.valueOf() > value.valueOf() &&  startDate.valueOf() === value.valueOf())){
      message.info('報名結束時間不能小於等於報名開始時間');
      return false;
    }
      if (moment(endReviewDate).format("YYYY-MM-DD") === moment(value).format("YYYY-MM-DD")) {
      message.info('報名結束時間不能大於等於截止審覈時間');
      return false;
    }
    this.handleDateChange('endDate', value);
  };

5、可參考
https://www.jianshu.com/p/e23f61cd0bea

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章