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> ) } }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!
· 零经验选手,Compose 一天开发一款小游戏!