Ant Design Vue前端UI框架 日期控件选择季度

以下仅供参考~

日期控件选季度，简单案例

<template>
    <a-date-picker format="YYYY-[Q]Q" placeholder="选择季度" @change="onQuarterChange" />
</template>

<script>
export default {
    methods: {
        onQuarterChange(v) {
            if (v) {
                // 将日期字符串转换为Date对象
                var date = new Date(v)
                // 获取月份（0-11）
                var month = date.getMonth()
                // 计算季度（1-4）
                var quarter = Math.floor(month / 3) + 1
                this.sQuarter = `${date.getFullYear()}-Q${quarter}`
                // 控制台打印
                console.log('季度:', date, month, quarter, date.getFullYear(), this.sQuarter)
            } else {
                this.sQuarter = null
            }
        }
    }
}
</script>