vue3使用<el-date-picker分別設置開始時間和結束時間時，設置開始時間晚于當前時間，開始時間早于結束時間，結束時間晚于開始時間

為避免出現填寫結束事件后再次修改開始時間，導致開始時間晚于結束時間，添加 @change=“handleChangeStartTime”
進一步進行時間校驗

<el-date-pickerv-else-if="item.type === 'datetimestart'"v-model="state.ruleForm[item.key]"type="datetime"format="YYYY-MM-DD HH:mm:ss"time-format="HH:mm:ss"value-format="YYYY-MM-DD HH:mm:ss"v-bind="pickerOptions"placeholder="選擇日期時間"@change="handleChangeStartTime"
>
</el-date-picker>
<el-date-pickerv-else-if="item.type === 'datetimeend'"v-model="state.ruleForm[item.key]"type="datetime"format="YYYY-MM-DD HH:mm:ss"time-format="HH:mm:ss"value-format="YYYY-MM-DD HH:mm:ss"v-bind="pickerOptionsEnd"placeholder="選擇日期時間"
>
</el-date-picker>

const handleChangeStartTime = () => {const startTime = convertToTimestamp(state.ruleForm.planStartTime);const endTime = convertToTimestamp(state.ruleForm.planEndTime);if (startTime > endTime) {ElMessage.warning('計劃開始時間晚于計劃結束時間，請重新添加計劃開始時間或計劃結束時間');}};/*** 生成一個數組* @param start* @param end*/const makeRange = (start: number, end: number) => {const result: number[] = [];for (let i = start; i <= end; i++) {result.push(i);}return result;};/*** 限制今天之前的時間不能選擇（小時）*/const disabledHours = () => {let newVal = new Date(state.ruleForm.planStartTime);if (newVal &&newVal.getFullYear() == new Date().getFullYear() &&newVal.getMonth() == new Date().getMonth() &&newVal.getDate() == new Date().getDate()) {//如果為今天，則限制當前時間前的時間不能選擇。return makeRange(0, new Date().getHours());}};/*** 限制今天之前的時間不能選擇（分鐘）* @param hour*/const disabledMinutes = () => {let newVal = new Date(state.ruleForm.planStartTime);if (newVal &&newVal.getFullYear() == new Date().getFullYear() &&newVal.getMonth() == new Date().getMonth() &&newVal.getDate() == new Date().getDate() &&newVal.getHours() == new Date().getHours()) {//如果為今天，則限制當前時間前的時間不能選擇。return makeRange(0, new Date().getMinutes() - 1);}};/*** 限制今天之前的時間不能選擇的配置*/const pickerOptions = computed(() => {return {// 限制今天之前的日期不能選擇disabledDate(time: any) {return time.getTime() < Date.now() - 8.64e7;},// 限制今天之前的小時不能選擇disabledHours,// 限制今天之前的分鐘不能選擇disabledMinutes,};});// 結束時間const pickerOptionsEnd = computed(() => {return {// 限制開始時間之前的日期不能選擇disabledDate(time: any) {return time.getTime() < convertToTimestamp(state.ruleForm.planStartTime) - 8.64e7;},// 限制開始時間之前的小時不能選擇disabledHours() {let newVal = new Date(state.ruleForm.planEndTime);const time = state.ruleForm.planStartTime;if (newVal &&newVal.getFullYear() == new Date(time).getFullYear() &&newVal.getMonth() == new Date(time).getMonth() &&newVal.getDate() == new Date(time).getDate()) {//限制開始時間前的時間不能選擇。return makeRange(0, new Date(time).getHours() - 1);}},// 限制開始時間之前的分鐘不能選擇disabledMinutes() {let newVal = new Date(state.ruleForm.planEndTime);const time = state.ruleForm.planStartTime;if (newVal &&newVal.getFullYear() == new Date(time).getFullYear() &&newVal.getMonth() == new Date(time).getMonth() &&newVal.getDate() == new Date(time).getDate() &&newVal.getHours() == new Date(time).getHours()) {//限制開始時間前的時間不能選擇。return makeRange(0, new Date(time).getMinutes() - 1);}},disabledSeconds() {let newVal = new Date(state.ruleForm.planEndTime);const time = state.ruleForm.planStartTime;if (newVal &&newVal.getFullYear() == new Date(time).getFullYear() &&newVal.getMonth() == new Date(time).getMonth() &&newVal.getDate() == new Date(time).getDate() &&newVal.getHours() == new Date(time).getHours() &&newVal.getMinutes() == new Date(time).getMinutes()) {//限制開始時間前的時間不能選擇。return makeRange(0, new Date(time).getSeconds());}// return makeRange(0, new Date(time).getSeconds() - 1);},};});/*** 將某個時間轉化成時間戳* 時間格式：2019-05-20 00:00:00 或 2019年5月1日 00:00:00* 返回值：1556640000000，13位時間戳*/// 示例日期字符串格式："2023-05-15 14:30:00"function convertToTimestamp(dateString: string) {// 處理iOS兼容性問題（將短橫線替換為斜杠）const formattedDate = dateString.replace(/-/g, '/');const dateObj = new Date(formattedDate);return dateObj.getTime(); // 返回13位時間戳（毫秒級）}