// 日期配置
export const DATA_CONFIGS = [{itemKey: "startDate",startDateKey: "startDate",endDateKey: "endDate",isStart: true,},{itemKey: "endDate",startDateKey: "startDate",endDateKey: "endDate",isStart: false,},
];
onBeforeMount(async () => {// 遍歷配置項,批量設置日期配置DATA_CONFIGS.forEach((config) => handleDateConfig(config));
});
// 禁用日期開始時間>=結束時間,開始時間最多選到當前后臺系統時間,
function handleDateConfig(config) {const { itemKey, isStart = true } = config;const item = findItem(formConfig.value.formItems, itemKey);if (item) {// 禁用日期item.disabledDate = (date) =>isStart? startDateDisabled(date, form.value.endDate, sysTime.value): endDateDisabled(date, form.value.startDate);// 禁用小時item.disabledHours = () =>hoursDisabled(form.value.startDate || (isStart && sysTime.value),form.value.endDate || (isStart && sysTime.value),isStart,);// 禁用分鐘item.disabledMinutes = () =>minutesDisabled(form.value.startDate || (isStart && sysTime.value),form.value.endDate || (isStart && sysTime.value),isStart,);}
}
處理開始時間,若開始時間大于結束時間,開始時間值修改為結束時間
// 開始時間
watch(() => form.value?.startDate,() => {handleStartDate(form);},
);// 處理開始時間,若開始時間大于結束時間,開始時間值修改為結束時間
export function handleStartDate(form) {const { startDate } = form.value;// 如果開始時間存在并且結束時間存在if (startDate && form.value.endDate) {const startDateObj = dayjs(startDate);const endDateObj = dayjs(form.value.endDate);// 如果開始時間大于結束時間if (startDateObj.isAfter(endDateObj)) {// 將開始時間修改為結束時間form.value.startDate = endDateObj.format("YYYY-MM-DD HH:mm");}}
}
處理結束時間,若結束時間小于開始時間,結束時間值修改為開始時間
// 結束時間
watch(() => form.value?.endDate,() => {handleEndDate(form);},
);
// 處理結束時間,若結束時間小于開始時間,結束時間值修改為開始時間
export function handleEndDate(form) {const { startDate } = form.value;// 如果開始時間存在并且結束時間存在if (startDate && form.value.endDate) {const startDateObj = dayjs(startDate);const endDateObj = dayjs(form.value.endDate);// 若結束時間小于開始時間,結束時間值修改為開始時間if (endDateObj.isBefore(startDateObj)) {form.value.endDate = dayjs(startDate).format("YYYY-MM-DD HH:mm");}}
}
禁用日期方法
/*** 禁用開始日期,即在結束日期或當前系統日期之后。**/
export const startDateDisabled = (date, endDate, sysTime) => {const _date = dayjs(date).startOf("day");const endDateWithoutTime = dayjs(endDate).startOf("day"); // 獲取沒有時間部分的 endDateconst sysDateWithoutTime = dayjs(sysTime).startOf("day"); // 獲取沒有時間部分的 sysTime// 只要 _date 超過其中任何一個日期(即 'endDate' 或 'sysTime'),禁用日期return _date.isAfter(endDateWithoutTime) || _date.isAfter(sysDateWithoutTime);
};
/*** 禁用結束日期,即在開始日期之后。**/
export const endDateDisabled = (date, startDate) => {if (!startDate || !date) return false;const _date = dayjs(date); // 轉換成 dayjs 對象,直接比較// 獲取沒有時間部分的 startDateconst startDateWithoutTime = dayjs(startDate).startOf("day");// 只要 _date 超過startDate,禁用日期return _date.isBefore(startDateWithoutTime);
};export function findItem(formItems, val, property = "name") {return formItems.find((item) => item[property] === val) || {};
}
禁用小時和分鐘方法
// 禁用-小時
export const hoursDisabled = (startTime, endTime, isStartTime = true) => {if (!startTime || !endTime) {return [];}if (isSameDate(startTime, endTime)) {if (isStartTime) {const endHour = dayjs(endTime).hour();// 生成從 endHour + 1 到 23 的數組return Array.from({ length: 24 - endHour - 1 }, (_, index) => endHour + 1 + index);} else {const startHour = dayjs(startTime).hour();// 生成從0 到 開始小時-1 的數組return Array.from({ length: startHour }, (v, k) => k);}}return [];
};
// 禁用-分鐘
export const minutesDisabled = (startTime, endTime, isStartTime = true, allowEqual = true) => {if (!startTime || !endTime) {return [];}const startHour = dayjs(startTime).hour();const endHour = dayjs(endTime).hour();if (isSameDate(startTime, endTime)) {if (startHour === endHour) {if (isStartTime) {const endMinute = dayjs(endTime).minute();if (allowEqual) {// 生成從 endMinute + 1 到 59 的數組return Array.from({ length: 60 - endMinute - 1 }, (_, index) => endMinute + 1 + index);} else {// 生成從 endMinute 到 59 的數組return Array.from({ length: 60 - endMinute }, (_, index) => endMinute + index);}} else {const startMinute = dayjs(startTime).minute();if (allowEqual) {// 生成從0 到 startMinute-1 的數組return Array.from({ length: startMinute }, (v, k) => k);} else {// 生成從0 到 startMinute 的數組return Array.from({ length: startMinute + 1 }, (v, k) => k);}}}}return [];
};
function isSameDate(date1, date2) {// 設置為當天的開始const formattedDate1 = dayjs(date1).startOf("day");const formattedDate2 = dayjs(date2).startOf("day");return formattedDate1.isSame(formattedDate2);
}