前言
当我们在开发的时候,会遇到设置时间的需求,当然我们要保证设置的时间是有效的,这个时候就要给开始时间和结束时间,添加一些限制。比如结束时间要大于开始时间,开始时间的选择区间是当前时间之后。
antd DatePicker组件的api有disabledDate和disabledTime这两个属性,disabledDate控制天数,disabledTime控制时分秒。
核心代码如下:
function range(start, end) {
const result = [];
for (let i = start; i < end; i++) {
result.push(i);
}
return result;
}
const handleDisabledRangeTime = (dates) => {
const currentHours = moment().hours();
const currentMinutes = moment().minutes();
const currntSeconds = moment().seconds();
const currntDates = moment().date();
if (dates) {
if (currntDates === dates.date()) {
let finalHour;
let finalMinute;
let finalSeconds;
if (dates.hour() > currentHours) {
finalMinute = 0;
} else {
finalHour = currentHours;
finalMinute = currentMinutes;
finalSeconds = currntSeconds;
}
return {
disabledHours: () => range(0, finalHour),
disabledMinutes: () => range(0, finalMinute),
disabledSeconds: () => range(0, finalSeconds)
};
}
if (moment() > dates) {
return {
disabledHours: () => range(0, 24),
disabledMinutes: () => range(0, 60),
disabledSeconds: () => range(0, 60)
};
}
} else {
return {
disabledHours: () => range(0, 24),
disabledMinutes: () => range(0, 60),
disabledSeconds: () => range(0, 60)
};
}
return {};
};
// 对天数的控制
const handleDisabledDate = current => current && current < moment().subtract(1, 'days');
<RangePicker disabledDate={handleDisabledDate} disabledTime={handleDisabledRangeTime} />
效果图: