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