需求： 根据选中类型 切换 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.GrouponChange={handleRadioChange}defaultValue={dateRange}options={[{label: "年际",value: "6",},{label: "季度",value: "4",},{label: "月度",value: "3",},]}optionType="button"buttonStyle="solid"/><RangePickerstyle={{ width: 200 }}onChange={handleDateChange}format={formatStr}value={time}picker={picker}/>