antd DatePicker 季度选择框默认值问题

需求背景： 在录入数据的时候，以季度为单位输入数据，暂存以字符串类似2024-Q1这种字符串结构存储。再次打开数据录入页面，需要显示已输入2024-Q1季度数据。

问题原因： antd DatePicker 季度选择框没有直接支持设置季度默认值的方法，当使用者直接设置2024-Q1字符串类型，会报错。

解决要点：

1. 将季度字符串2024-Q1转化为对应日期字符串，进而转化为当前季度的某一日的日期类型
2. 将该日期类型赋值给 DatePicker，就可以显示为对应季度

代码展示：

/**
 * 将季度字符串转化为日期字符串
 */
const convertQuarterToDate = (quarterStr: string) => {
    if (!quarterStr) {
        return null
    }
    // 将字符串按"-"分割成数组
    const [year, quarter] = quarterString.split("-")

    // 判断季度并计算月份和日期
    switch (quarter) {
        case "Q1":
            return `${year}-01-01`
        case "Q2":
            return `${year}-04-01`
        case "Q3":
            return `${year}-07-01`
        case "Q4":
            return `${year}-10-01`
        default:
            return null
    }
}

const transMoment = (momentDate) => {
    if (momentDate) {
        return moment(momentDate, "yyyy-MM-DD")
    }
    return null
}

实际代码使用：

<DatePicker picker='quarter' defaultValue={transMoment(convertQuarterToDate('2024-Q1'))} />

UI效果：