Vue3 + AntDesignVue4.x 季度选择器 eg: 面板第一季度非Q1

案例

Code

					<a-form-item label="季度" required>
						<a-date-picker
							v-model:value="formState.reportTaskTime"
							format="YYYY年第Q季度"
							value-format="YYYY年第Q季度"
							placeholder="请选择季度"
							@change="onPickerChange"
							@openChange="handleOpenChange"
							picker="quarter"/>
					</a-form-item>

// 当日期选择器面板打开时触发
const handleOpenChange = (open) => {
	if (open) {
		// 延迟执行以确保 DOM 已渲染
		setTimeout(() => {
			replaceQuarterText();
		}, 100);
	}
};

// 替换 Q1/Q2 为中文季度
const replaceQuarterText = () => {
	const cells = document.querySelectorAll('.ant-picker-cell');

	cells.forEach(cell => {
		const title = cell.getAttribute('title');
		const innerDiv = cell.querySelector('.ant-picker-cell-inner');

		if (title && innerDiv) {
			if (title.includes('Q1')) {
				innerDiv.textContent = '第一季度';
			} else if (title.includes('Q2')) {
				innerDiv.textContent = '第二季度';
			} else if (title.includes('Q3')) {
				innerDiv.textContent = '第三季度';
			} else if (title.includes('Q4')) {
				innerDiv.textContent = '第四季度';
			}
		}
	});
};


:deep(.ant-form-item) {
	margin-right: 26px;
}