1、新增一个组件
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注释来填写传入值
<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>