fix(datepicker): 优化日期禁用逻辑及组件更新方式

- 修正日期禁用函数逻辑,避免重复判断dateRange是否存在
- 结束时间限制调整为只禁止超过开始时间一年后的日期
- 开始时间限制调整为只禁止早于结束时间一年前的日期
- 移除通过DOM操作强制重新渲染的代码,改用组件强制更新方法
- 简化代码增强可读性和维护性
This commit is contained in:
zhouyonggao 2025-12-19 00:14:47 +08:00
parent c600b30b7e
commit c27cf278dd
1 changed files with 9 additions and 25 deletions

View File

@ -194,39 +194,30 @@ const app = createApp({
* @returns {boolean} 是否禁用
*/
const disabledDate = (date) => {
if (!date || !state.exportForm.dateRange) return false;
if (!date) return false;
// 如果已经选择了开始时间,计算结束时间限制
if (state.exportForm.dateRange[0]) {
if (state.exportForm.dateRange && state.exportForm.dateRange[0]) {
const startTime = new Date(state.exportForm.dateRange[0]);
const oneYearLater = new Date(startTime);
oneYearLater.setFullYear(startTime.getFullYear() + 1);
oneYearLater.setDate(oneYearLater.getDate() - 1); // 减去一天以确保不超过一年
const oneYearEarlier = new Date(startTime);
oneYearEarlier.setFullYear(startTime.getFullYear() - 1);
oneYearEarlier.setDate(oneYearEarlier.getDate() + 1); // 加上一天
// 结束时间不能早于开始时间一年前,也不能晚于开始时间一年后
return date < oneYearEarlier || date > oneYearLater;
// 只限制结束时间不能超过开始时间一年后
if (date > oneYearLater) return true;
}
// 如果已经选择了结束时间,计算开始时间限制
if (state.exportForm.dateRange[1]) {
if (state.exportForm.dateRange && state.exportForm.dateRange[1]) {
const endTime = new Date(state.exportForm.dateRange[1]);
const oneYearLater = new Date(endTime);
oneYearLater.setFullYear(endTime.getFullYear() + 1);
oneYearLater.setDate(oneYearLater.getDate() - 1); // 减去一天
const oneYearEarlier = new Date(endTime);
oneYearEarlier.setFullYear(endTime.getFullYear() - 1);
oneYearEarlier.setDate(oneYearEarlier.getDate() + 1); // 加上一天
// 开始时间不能晚于结束时间一年后,也不能早于结束时间一年前
return date < oneYearEarlier || date > oneYearLater;
// 只限制开始时间不能早于结束时间一年前
if (date < oneYearEarlier) return true;
}
// 默认情况下不禁用任何日期
return false;
};
@ -987,15 +978,8 @@ const app = createApp({
Vue.watch(() => state.exportForm.dateRange, (newVal) => {
// 触发日期选择器重新计算禁用状态
if (exportFormRef.value && exportFormRef.value.$el) {
// 查找日期选择器元素并强制重新渲染
const datePicker = exportFormRef.value.$el.querySelector('.el-date-editor');
if (datePicker) {
// 通过临时移除再添加来强制重新渲染
const parent = datePicker.parentElement;
const nextSibling = datePicker.nextSibling;
parent.removeChild(datePicker);
parent.insertBefore(datePicker, nextSibling);
}
// 通过强制更新组件状态来重新计算禁用日期
exportFormRef.value.$forceUpdate();
}
}, { deep: true });