antd 日期选择器限制不可跨年选择时间
需求分析:在查询账单和订单时,由于后端数据按照年进行分表,如果查询日期跨年进行选择的话则需要去查询两个表然后合并数据返回,但由于数据量太大,这样会非常卡顿,所以在前端日期选择框里添加限制,即开始时间选择了2022年的某一天,则结束时间也只能是2022年的某一天。
import React, { useState } from 'react';
import { DatePicker } from 'antd';
//格式化日期插件
import moment from "moment";
const { RangePicker } = DatePicker;
const App = () => {
const [dates, setDates] = useState(null);
const [value, setValue] = useState(null);
const disabledDate = (current) => {
if (!dates) {
return false;
}
//选择了开始时间,计算出当前选择的时间距离年底剩余天数
//使用moment插件获取到当前选择的年份并加一到下一年Number(moment(dates[0]).format("YYYY")) + 1
//然后计算出下一年一月一号的时间戳(毫秒单位)
let nextYear = moment(
String(Number(moment(dates[0]).format("YYYY")) + 1) +
"-" +
"01" +
"-" +
"01"
).format("x");
//计算出当前选择的开始日期下,距离所能选择的最晚日期的天数,即为下年一月一号的时间戳减去当前选择开始日期的时间戳然后除以86400000(一天的毫秒数)减去1,防止出现小数,我们使用math函数进行取整
let tooLateDays = Math.round(
(nextYear -
moment(moment(dates[0]).format("YYYY-MM-DD")).format("x")) /
86400000 -
1
);
//同理,当先选择结束日期时,可以计算出当前结束日期下,可选择的最早期日期
let preYear = moment(
String(Number(moment(dates[1]).format("YYYY")) - 1) +
"-" +
"12" +
"-" +
"31"
).format("x");
let tooEarlyDays = Math.round(
(moment(moment(dates[1]).format("YYYY-MM-DD")).format("x") -
preYear) /
86400000 -
1
);
const tooLate = dates[0] && current.diff(dates[0], 'days') > tooLateDays;
const tooEarly = dates[1] && dates[1].diff(current, 'days') > tooEarlyDays;
return !!tooEarly || !!tooLate;
};
const onOpenChange = (open) => {
if (open) {
setDates([null, null]);
} else {
setDates(null);
}
};
return (
<RangePicker
value={dates || value}
disabledDate={disabledDate}
onCalendarChange={(val) => setDates(val)}
onChange={(val) => setValue(val)}
onOpenChange={onOpenChange}
/>
);
};
export default App;