react中封装antd日期框（近7天/日/月/周/季/年）
近期项目完成（适用于我的项目中，如需调整可根据自己项目进行更改总体功能没问题，主要数据输出根据自己需要更改）总结了一下日期下拉选择如图所示： 其中对应cycleType是后端要求cycleType 周期类型：0-日，1-周，2-月，3-季，4-年，主要是能获取到时间即可
下面上组件DateRange代码：
/* eslint-disable */
import React, { useEffect, useState, useRef } from "react";
import PropType from "prop-types";
import { DatePicker, Select } from "antd";
import moment from "moment";const { Option } = Select;
const { RangePicker } = DatePicker;
function DateRange(props) {const {timeChange,hasShowYesterDay, // 是否默认显示昨天 默认为false 所以默认显示近7天dateTypeChange,defaultTimeType, // 默认回显的传入的defaultTimeType赋值给timeTypedefaultTimeVal, // 默认回显选中的时间的传入的defaultTimeVal} = props;// cycleType 周期类型：0-日，1-周，2-月，3-季，4-年const [day, setDay] = useState("");const [week, setWeek] = useState("");const [month, setMonth] = useState("");const [season, setSeason] = useState("");const [year, setYear] = useState("");const [timeType, setTimeType] = useState(hasShowYesterDay ? "day" : "seven");const [custom, setCustom] = useState("");const [format, setFormat] = useState("YYYY-MM-DD");const defaultSevenDate = {startDate: moment().subtract(1, "weeks"),endDate: moment().subtract(1, "days"),};const yesterDayDate = {startDate: moment().subtract(1, "day"),endDate: moment().subtract(1, "day"),};const getDate = (year, month) => {var d = new Date(year, month, 0);return d.getDate();};const disabledCustomDate = () => {};useEffect(() => {if (hasShowYesterDay) {timeChange([moment(moment().subtract(1, "day")).format("YYYY-MM-DD"),moment(moment().subtract(1, "day")).format("YYYY-MM-DD"),],0,true);return;}timeChange([moment().subtract(1, "weeks").format("YYYY-MM-DD"),moment().subtract(1, "days").format("YYYY-MM-DD"),],0,true);}, []);useEffect(() => {setTimeType(timeType);dateTypeChange(timeType);}, [timeType]);useEffect(() => {if (defaultTimeType) {setTimeType(defaultTimeType);switch (defaultTimeType) {case "seven":break;case "day":setDay([moment(defaultTimeVal[0]), moment(defaultTimeVal[1])]);break;case "week":setWeek("");break;case "month":setMonth([moment(defaultTimeVal[0]), moment(defaultTimeVal[1])]);break;case "season":setSeason([moment(defaultTimeVal[0]), moment(defaultTimeVal[1])]);break;case "year":setYear([moment(defaultTimeVal[0]), moment(defaultTimeVal[1])]);break;case "custom":setCustom("");timeChange("");break;}}}, [defaultTimeType]);return ( { width: 250, display: timeType == "seven" || "none" }}disabled/> {setDay(dates);timeChange(dateStrings, 0);}}style={{ width: 250, display: timeType == "day" || "none" }}/> {setWeek(dates);timeChange([moment(dates[0]).day(1).format(format),moment(dates[1]).day(7).format(format),],1);}}picker="week"style={{ width: 250, display: timeType == "week" || "none" }}/> {let arr = dateStrings[1].split("-");const lastDate = getDate(arr[0], arr[1]).toString().padStart(2, "0");setMonth(dates);timeChange([`${dateStrings[0]}-01`, `${dateStrings[1]}-${lastDate}`],dateStrings[0] == dateStrings[1] ? 0 : 2);}}picker="month"style={{ width: 250, display: timeType == "month" || "none" }}/> {setSeason(dates);timeChange([moment(dates[0]).startOf("quarters").format(format),moment(dates[1]).endOf("quarters").format(format),],dateStrings[0] == dateStrings[1] ? 2 : 3);}}picker="quarter"style={{ width: 250, display: timeType == "season" || "none" }}/> {setYear(dates);const lastDate = getDate(dateStrings[1], 12).toString().padStart(2, "0");timeChange([`${dateStrings[0]}-01-01`, `${dateStrings[1]}-12-${lastDate}`],dateStrings[0] == dateStrings[1] ? 2 : 4);}}picker="year"style={{ width: 250, display: timeType == "year" || "none" }}/>{ width: 250, display: timeType == "custom" || "none" }}allowClear={false}disabledDate={disabledCustomDate}onChange={(dates, dateStrings) => {setCustom(dates);timeChange(dateStrings, 0);}}/>);
}DateRange.propTypes = {timeChange: PropType.func,dateTypeChange: PropType.func,hasShowYesterDay: PropType.bool,defaultTimeType: PropType.string,defaultTimeVal: PropType.array,
};DateRange.defaultProps = {timeChange: () => {},dateTypeChange: () => {},hasShowYesterDay: false,defaultTimeType: "",defaultTimeVal: [],
};export default DateRange;
组件在文件的使用：
import DateRange from "Components/DateRange";function CartInventory(props) {const [timeVal, setTimeVal] = useState({});const [dateType, setDateType] = useState("seven");const [cycleType, setCycleType] = useState(0);useEffect(() => {// 如果需要回显日期值 可以在该生命周期重新设置// setTimeVal（）// setDateType（）return () => {};},[])const timeRangeChange = (tv, timeType, isFirst = false) => {setCycleType(timeType);setTimeVal(tv);if (tv && !isFirst) {// 重新获取列表props.getData();}};return (<> {setDateType(type);}}defaultTimeType={dateType}defaultTimeVal={timeVal}>)
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！