antd的RangePicker时间组件,当天之后的时间不能选择,选择范围30天

复制代码
import React, { Component } from 'react'
import { DatePicker} from 'antd';
import moment from 'moment';
import 'moment/locale/zh-cn';
import locale from 'antd/lib/date-picker/locale/zh_CN';
const { RangePicker } = DatePicker;

export default class App extends Component {

    state = {
        selectDate: null,
    }

  // 时间选择相关

  /* 控制下单时间选择范围30天 */
   disabledTaskDate = (current) => {

    if (this.state.selectDate) {
      const offsetV = 2592000000 //30天转换成ms
      const selectV = this.state.selectDate.valueOf()
      const currentV = current.valueOf()
      if (this.calcAdd(currentV, offsetV) > moment().valueOf()) {
        return this.calcMinus(currentV, offsetV) >= selectV || current > moment().endOf('day')
          ? true
          : false
      } else {
        return this.calcMinus(currentV, offsetV) >= selectV || this.calcAdd(currentV, offsetV) <= selectV
          ? true
          : false
      }
    } else {
      return current && current > moment().endOf('day') // 当天以后的时间不能选择
    }
  }

  /* 选择任务时间变化 */
   onDateChange = (dates) => {
    if (!dates || !dates.length) return
    this.setSelectDate(dates[0])
  }

   onDateOpenChange = () => {
    this.setSelectDate(null)
    
  }

  setSelectDate = (args) => {
      this.setState({
        selectDate: args,
      })
  }


    /* 两个浮点数相减 */
  calcMinus = (num1, num2) => {
    num1 = Number(num1);
    num2 = Number(num2);
    if (isNaN(num1) || isNaN(num2)) return 0;
  
    const num1Digits = (num1.toString().split(".")[1] || "").length;
    const num2Digits = (num2.toString().split(".")[1] || "").length;
    const baseNum = Math.pow(10, Math.max(num1Digits, num2Digits));
    return (this.calcMulti(num1, baseNum) - this.calcMulti(num2, baseNum)) / baseNum;
  };

  calcAdd = (num1, num2) => {
    num1 = Number(num1);
    num2 = Number(num2);
    if (isNaN(num1) || isNaN(num2)) return 0;
  
    const num1Digits = (num1.toString().split(".")[1] || "").length;
    const num2Digits = (num2.toString().split(".")[1] || "").length;
    const baseNum = Math.pow(10, Math.max(num1Digits, num2Digits));
    return (this.calcMulti(num1, baseNum) + this.calcMulti(num2, baseNum)) / baseNum;
  }
  
    /* 两个浮点数相乘 */
    calcMulti = (num1, num2) => {
        num1 = Number(num1);
        num2 = Number(num2);
        if (isNaN(num1) || isNaN(num2)) return 0;

        const num1String = num1.toString();
        const num2String = num2.toString();
        const num1Digits = (num1String.split(".")[1] || "").length;
        const num2Digits = (num2String.split(".")[1] || "").length;
        const baseNum = Math.pow(10, num1Digits + num2Digits);
        return (
            (Number(num1String.replace(".", "")) *
            Number(num2String.replace(".", ""))) /
            baseNum
        );
    };


    render() {

        return (
            <div>
                <RangePickerdisabledDate={this.disabledTaskDate}
                    onCalendarChange={this.onDateChange}
                    onOpenChange={this.onDateOpenChange}
                    locale={locale}
                />
                
            </div>
        )
    }
}
复制代码

 

posted @   懒惰的熊猫  阅读(1198)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!
· 零经验选手,Compose 一天开发一款小游戏!
点击右上角即可分享
微信分享提示