1、新增一个组件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | import React, { useEffect, useState } from "react" ; import { DatePicker } from "antd" ; import dayjs from "dayjs" ; import timer from "../../utils/timer" ; const { RangePicker } = DatePicker; /** * * @param {{rangeDays} | {currentMonth} |{thisMonth}} props * @returns */ const CustomRangePicker = (props) => { const { showTime = {}, rangeDays = 30, //选择天数间隔 currentMonth = false , //是否只能选择已选择时间当月时间 thisMonth = false , //是否只能选择本月时间 } = props; const [dates, setDates] = useState( null ); const disabledDate = (current) => { if (!dates) { return false ; } let start_date = dates[0]; //小于现在时间 const date_check_0 = dayjs(current).valueOf() < dayjs().endOf( "day" ).valueOf(); //小于规定时间间隔 let date_check_1 = dayjs(current).endOf( "date" ).valueOf() < dayjs(start_date).endOf( "date" ).add(rangeDays, "day" ).valueOf() && date_check_0; //大于选中的当月第一天,小于选中的当月最后一天 let date_check_2 = dayjs(current).valueOf() > dayjs(start_date).startOf( "month" ).valueOf() && dayjs(current).valueOf() < dayjs(start_date).endOf( "month" ).valueOf() && date_check_0; //大于本月第一天 let date_check_3 = dayjs(current).valueOf() > dayjs().startOf( "month" ).valueOf() && date_check_0; if (start_date) { if (currentMonth) { return !(date_check_1 && date_check_2); } else if (thisMonth) { return !(date_check_1 && date_check_3); } else { return !date_check_1; } } else { return thisMonth ? !date_check_3 : !date_check_0; } }; const onOpenChange = (open) => { if (open) { setDates([ null , null ]); } else { setDates( null ); } }; return ( <RangePicker {...props} disabledDate={disabledDate} onCalendarChange={(val) => setDates(val)} onOpenChange={onOpenChange} format={ "YYYY-MM-DD HH:mm:ss" } showTime={{ defaultValue: [ dayjs( "00:00:00" , "HH:mm:ss" ), dayjs( "23:59:59" , "HH:mm:ss" ), ], ...showTime, }} /> ); }; export default CustomRangePicker; |
2、在需要使用的页面引入使用,可以根据上面组件配置的props注释来填写传入值
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <Form form={form} name= "basic" initialValues={{ time: [ dayjs().subtract(7, "day" ).startOf( "date" ), dayjs().endOf( "date" ), ], }} layout= "inline" > <Form.Item name= "time" > <CustomRangePicker rangeDays={7} /> </Form.Item> </Form> |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现