一、设置日期只能选择当前日期及以后的日期
const disabledDate = (current: any) => {
return current && current < moment().subtract(1, 'days').endOf('day');
}
二、设置只能选择今天的当前时间以后的时间(今天)
const range = (start: any, end: any) => {
const result = [];
for (let i = 0; i < start; i++) {
result.push(i);
}
return result;
}
const disabledDateTime = (dates: any) => {
let hours = moment().hours();//0~23
let minutes = moment().minutes();//0~59
// let seconds = moment().seconds();//0~59
if (dates && moment(dates).date() === moment().date()) {
return {
disabledHours: () => range(hours, 24),
disabledMinutes: () => range(minutes, 60),
// disabledSeconds: () => range(seconds + 1, 59),
};
}
return {
disabledHours: () => [],
disabledMinutes: () => [],
// disabledSeconds: () => [],
};
}
三、设置只能选择当前时间以前的时间(今天)
const range0 = (start: any, end: any) => {
const result = [];
for (let i = start; i <= end; i++) {
result.push(i);
}
return result;
}
//当日只能选择当前时间之后的时间点
const disabledTime = (date: any) => {
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: () => range0(0, currentHours-1), //设置为当天现在这小时,禁用该小时,该分钟之前的时间
disabledMinutes: () => range0(0, currentMinutes-1),
};
}else if (date && settingDay === currentDay && settingHours > currentHours) {
return {
disabledHours: () => range0(0, currentHours-1), //设置为当天现在这小时之后,只禁用当天该小时之前的时间
};
}else if (date && settingDay === currentDay && settingHours < currentHours) {
return {
disabledHours: () => range0(0, currentHours-1), //若先设置了的小时小于当前的,再设置日期为当天,需要禁用当天现在这小时之前的时间和所有的分
disabledMinutes: () => range0(0, 59),
}
}else if (date && settingDay > currentDay) {
return {
disabledHours: () => [], //设置为当天之后的日期,则不应有任何时间分钟的限制
disabledMinutes: () => [],
}
}
return {
disabledHours: () => [], //设置为当天之后的日期,则不应有任何时间分钟的限制
disabledMinutes: () => [],
}
}
使用方法:
<DatePicker
style={
{ width: '100%' }}
showTime
onChange={() => {}}
format="YYYY-MM-DD HH:mm"
placeholder="选择日期时间"
disabledDate={disabledDate}
disabledTime={disabledDateTime}
/>
效果: