一、DatePicker组件的设置。
showTime设置时间只显示时,分,不显示秒
disabledDate函数:设置日期的禁用
disabledTime函数: 设置时间的禁用
<DatePicker
onChange={e => this.changeTime(e, 'beginTime')}
placeholder="请选择开始时间"
showTime={{ format: 'HH:mm' }}
showToday={false}
getCalendarContainer={triggerNode => triggerNode.parentNode}
format={dateFormat}
value={this.state.beginTime ? moment(this.state.beginTime, dateFormat) : null}
disabledDate={this.disabledDate}
disabledTime={this.disabledTime}
/>
//时间禁用,当天之前的日期不可选
disabledDate = (current) => {
return current && current < moment().startOf('days');
}
range = (start, end) => {
const result = [];
for (let i = start; i <= end; i++) {
result.push(i);
}
return result;
}
//当日只能选择当前时间之后的时间点
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: () => [],
}
}
}
效果图: