在使用日期组件的时候,有时候会遇到这样的情况,要求小于当前的日期和时间不能让用户去选中,我们就需要做一些设置。
一、设置DatePicker组件
showTime:时间,目前只能设置到分钟,不能禁用秒
format:显示的格式
disabledDate函数:设置日期的禁用
disabledTime函数: 设置时间的禁用
<DatePicker
disabledDate={disabledDate}
disabledTime={disabledTime}
showTime
format="YYYY-MM-DD HH:mm:ss"
placeholder={this.renderTime(this.state.startTime)}
onChange={(value, dateString) => {
this.setState({
startTime: dateString
})
}}
/>
//禁用当天之前的日期
disabledDate = (current) => {
return current && current < moment().startOf('days');
}
disabledTime = (date) => {
let currentDay = moment().date();
let currentHours = moment().hours();
let currentMinutes = moment().minutes();
let settingHours = moment(date).hours();
let settingDay = moment(date).date();
if (date && settingDay === currentDay && settingHours === currentHours) {
return {
disabledHours: () => this.range(0, currentHours-1), //设置为当天这一小时,禁用该小时,该分钟之前的时间
disabledMinutes: () => this.range(0, currentMinutes-1),
};
}else if (date && settingDay === currentDay && settingHours > currentHours) {
return {
disabledHours: () => this.range(0, currentHours-1), //设置为当天这小时之后,只禁用当天该小时之前的时间
};
}else if (date && settingDay === currentDay && settingHours < currentHours) {
return {
disabledHours: () => this.range(0, currentHours-1), //若先设置了的小时小于当前的,再设置日期为当天,需要禁止选中
disabledMinutes: () => this.range(0, 59),
}
}else if (date && settingDay > currentDay) {
return {
disabledHours: () => [], //设置为当天之后的日期
disabledMinutes: () => [],
}
}
}
range = (start, end) => {
const result = [];
for (let i = start; i <= end; i++) {
result.push(i);
}
return result;
}
完成后就会看到如下图的结果