antd+moment.js限制rangePicker组件可选择的日期范围
经常遇到开始结束日期【不能选当前系统时间之前/之后的】、【只能选今天~今天之前/之后xx天的】的需求。
以下用 只能选【今天~往前追溯90天】内,(今天也可选)为例:
import { DatePicker } from 'antd';
import moment from "moment";
const { RangePicker } = DatePicker;
// 规定不可选的 日期范围
const rangePickerDisabledDate = current => {
// 不能选今天以后,只能选【今天~往前追溯90天】内,今天可选。
let result = false;
if (current) {
if (current < moment().subtract(90, "days") || current > moment().endOf("day")) {
result = true;
} else {
result = false;
}
}
return result;
};
// 规定不可选的 时分秒范围
const rangePickerDisabledTime = (_, type) => {
if (type === 'start') {
return {
disabledHours: () => range(0, 60).splice(4, 20),
disabledMinutes: () => range(30, 60),
disabledSeconds: () => [55, 56],
};
}
return {
disabledHours: () => range(0, 60).splice(20, 4),
disabledMinutes: () => range(0, 31),
disabledSeconds: () => [55, 56],
};
}
// 组件使用
<RangePicker
disabledDate={rangePickerDisabledDate}
disabledTime={rangePickerDisabledTime}
showTime={{
defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 'HH:mm:ss')],
}}
format="YYYY-MM-DD HH:mm:ss"
/>