react antd rangPicker组件选择当月、本月时间

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>