近期项目完成(适用于我的项目中,如需调整可根据自己项目进行更改总体功能没问题,主要数据输出根据自己需要更改)总结了一下日期下拉选择如图所示: 其中对应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赋值给timeType
defaultTimeVal, // 默认回显选中的时间的传入的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 (
<div>
<Select
// defaultValue={defaultValue}
value={timeType}
style={{ width: 120 }}
onChange={(value) => {
setTimeType(value);
switch (value) {
case "seven":
timeChange(
[
moment()
.subtract(1, "weeks")
.format("YYYY-MM-DD"),
moment()
.subtract(1, "days")
.format("YYYY-MM-DD"),
],
0
);
break;
case "day":
if (hasShowYesterDay) {
setDay([yesterDayDate.startDate, yesterDayDate.endDate]);
timeChange(
[
moment(moment().subtract(1, "day")).format("YYYY-MM-DD"),
moment(moment().subtract(1, "day")).format("YYYY-MM-DD"),
],
0,
true
);
return;
}
setDay([moment(), moment()]);
timeChange(
[moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")],
0
);
break;
case "week":
setWeek("");
timeChange("");
break;
case "month":
let currentYearMonth = moment().format("YYYY-MM");
let arr = currentYearMonth.split("-");
setMonth([
moment(moment().format("YYYY-MM")),
moment(moment().format("YYYY-MM")),
]);
timeChange(
[
`${currentYearMonth}-01`,
`${currentYearMonth}-${getDate(arr[0], arr[1])
.toString()
.padStart(2, "0")}`,
],
0
);
break;
case "season":
setSeason([
moment(moment().startOf("quarters")),
moment(moment().endOf("quarters")),
]);
timeChange(
[
moment(moment().startOf("quarters")).format("YYYY-MM-DD"),
moment(moment().endOf("quarters")).format("YYYY-MM-DD"),
],
2
);
break;
case "year":
let currentYear = moment().format("YYYY");
setYear([moment(currentYear), moment(currentYear)]);
timeChange(
[
`${currentYear}-01-01`,
`${currentYear}-12-${getDate(currentYear, 12)
.toString()
.padStart(2, "0")}`,
],
2
);
break;
case "custom":
setCustom("");
timeChange("");
break;
}
}}
>
<Option value="seven">近七天</Option>
<Option value="day">日</Option>
{/* <Option value="week">周</Option> */}
<Option value="month">月</Option>
<Option value="season">季</Option>
<Option value="year">年</Option>
{/* <Option value="custom">自定义</Option> */}
</Select>
<RangePicker
value={[defaultSevenDate.startDate, defaultSevenDate.endDate]}
style={{ width: 250, display: timeType == "seven" || "none" }}
disabled
/>
<RangePicker
value={
hasShowYesterDay && !day
? [yesterDayDate.startDate, yesterDayDate.endDate]
: day
}
allowClear={false}
onChange={(dates, dateStrings) => {
setDay(dates);
timeChange(dateStrings, 0);
}}
style={{ width: 250, display: timeType == "day" || "none" }}
/>
<RangePicker
value={week}
allowClear={false}
onChange={(dates, dateStrings) => {
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" }}
/>
<RangePicker
value={month}
allowClear={false}
onChange={(dates, dateStrings) => {
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" }}
/>
<RangePicker
value={season}
allowClear={false}
onChange={(dates, dateStrings) => {
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" }}
/>
<RangePicker
allowClear={false}
value={year}
onChange={(dates, dateStrings) => {
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" }}
/>
<RangePicker
value={custom}
style={{ width: 250, display: timeType == "custom" || "none" }}
allowClear={false}
disabledDate={disabledCustomDate}
onChange={(dates, dateStrings) => {
setCustom(dates);
timeChange(dateStrings, 0);
}}
/>
</div>
);
}
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 (
<>
<DateRange
timeChange={timeRangeChange}
dateTypeChange={(type) => {
setDateType(type);
}}
defaultTimeType={dateType}
defaultTimeVal={timeVal}
></DateRange>
</>)
}