antd RangePicker 格式化 季度 YYYY- QQ 受控组件 / 非受控组件

需求： 根据选中类型 切换 RangePicker 且设默认值
年： YYYY
季度： YYYY - QQ
月： YYYY - MM

Antd 日历组件 需要展示 YYYY - Q1  需求 且传值也是 YYYY -QQ 

import dayjs from "dayjs";

let advancedFormat = require("dayjs/plugin/advancedFormat");
let quarterOfYear = require("dayjs/plugin/quarterOfYear");

// 扩展QuarterOfYear插件
dayjs.extend(quarterOfYear);
dayjs.extend(advancedFormat);

//----------------------------------------------------------------
//日期数据
const [time, setTime] = useState([]); //  控制组件展示数据
//日期类型
const [dateRange, setDateRange] = useState("4");

 // 处理展示根据YYYY-QQ 得到dete数据
const parseQuarterString = quarterString => {
	const [year, quarter] = quarterString.split("-Q");
	return dayjs(`${year}-01-01`).quarter(parseInt(quarter));
};
	// 格式化季度
	const formatQuarter = value => {
		if (value.hasOwnProperty("quarter")) {
			return `${value.format("YYYY")}-Q${value?.quarter()}`;
		} else {
			return `${value.format("YYYY")}-Q${Math.ceil(
				(value.month() + 1) / 3,
			)}`;
		}
	};

// 根据选中类型切换 formate 格式
	const formatStr = useMemo(() => {
		switch (dateRange) {
			case "6":
				return "YYYY";
				break;
			case "4":
				return formatQuarter;
				break;
			case "3":
				return "YYYY-MM";
				break;
			default:
				return "YYYY";
				break;
		}
	}, [dateRange]);

 // 根据选中类型 切换 picker  类型
	const picker = useMemo(() => {
		switch (dateRange) {
			case "6":
				return "year";
				break;
			case "4":
				return "quarter";
				break;
			case "3":
				return "month";
				break;
			default:
				return "year";
				break;
		}
	}, [dateRange]);

 // 默认值设置
	const defaultValue = useMemo(() => {
		// 前4季度
		switch (dateRange) {
			case "6":
				return [
					dayjs(
						dayjs()
							.subtract(5, "year")
							.year()
							.toString(),
						"YYYY",
					),
					dayjs(
						dayjs()
							.year()
							.toString(),
						"YYYY",
					),
				]; // 'year'
				break;
			case "4":
				return [
					parseQuarterString(
						`${dayjs()
							.subtract(1, "year")
							.year()}-Q${(dayjs().quarter() + 4) % 4}`,
					),
					parseQuarterString(
						`${dayjs()
							// .subtract(1, "year")
							.year()}-Q${(dayjs().quarter() + 4) % 4}`,
					),
				];
				break;
			case "3":
				return [
					dayjs(
						dayjs()
							.subtract(12, "month")
							.format("YYYY-MM"),
						"YYYY-MM",
					),
					dayjs(dayjs().format("YYYY-MM"), "YYYY-MM"),
				]; //'month'
				break;
			default:
				return [
					dayjs(
						dayjs()
							.subtract(5, "year")
							.year()
							.toString(),
						"YYYY",
					),
					dayjs(
						dayjs()
							.year()
							.toString(),
						"YYYY",
					),
				]; // 'year'
				break;
		}
	}, [dateRange]);

	// 单选框
	const handleRadioChange = e => {
		setTrendTime([]);
		setDateRange(e.target.value);
	};
	
 //RangePicker 组件数据改变 设值
	const handleDateChange = (dates, dateString) => {
		// 年度 当前 - 5年
		// 季度 当前 - 4个季度
		// 月度 当前 - 12个月
		console.log(dateString, "dateString");
		setStartTime(dateString[0]);
		setEndTime(dateString[1]);

		getData({
			startTime: dateString[0],
			endTime: dateString[1],
		});
	};
	
	// 根据类型改变 设置初始值 及调用接口
	useEffect(() => {
		
		setTime(defaultValue);
		if (dateRange === "4") {
			setStartTime(formatQuarter(defaultValue[0]));
			setEndTime(formatQuarter(defaultValue[1]));
			getData({
				startTime: formatQuarter(defaultValue[0]),
				endTime: formatQuarter(defaultValue[1]),
			});
		} else {
			setStartTime(defaultValue[0].format(formatStr));
			setEndTime(defaultValue[1].format(formatStr));
			getData({
				startTime: defaultValue[0].format(formatStr),
				endTime: defaultValue[1].format(formatStr),
			});
		}
	}, [dateRange]);

// 组件使用
			<Radio.Group
						onChange={handleRadioChange}
						defaultValue={dateRange}
						options={[
							{
								label: "年际",
								value: "6",
							},
							{
								label: "季度",
								value: "4",
							},
							{
								label: "月度",
								value: "3",
							},
						]}
						optionType="button"
						buttonStyle="solid"
					/>

					<RangePicker
						style={{ width: 200 }}
						onChange={handleDateChange}
						format={formatStr}
						value={time}
						picker={picker}
					/>