antd日期选择器限制不可跨年选取时间

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;
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值