element-pushel-date-picker日期时间选择器，禁用可选中的时间精确到分钟

效果

 本来用的是时间段，但是甲方说不好用，让换成这样的 六百六十六

<el-form-item label="考评时间" class="is-required"> <div style="display: flex; gap: 10px;"> <el-form-item label="" style="display: inline-block; margin-bottom: 0px;" prop="EvaluationStartTime"> <el-date-picker v-model="form.EvaluationStartTime" type="datetime" placeholder="开始时间" prefix-icon="none" value-format="YYYY-MM-DD HH:mm" format="YYYY-MM-DD HH:mm" style="width: 190px;" @change="changeEvaluationStartTime" ></el-date-picker> </el-form-item> - <el-form-item label="" style="display: inline-block; margin-bottom: 0px;" prop="EvaluationEndTime"> <el-date-picker :disabled="!form.EvaluationStartTime" v-model="form.EvaluationEndTime" type="datetime" placeholder="结束时间" prefix-icon="none" value-format="YYYY-MM-DD HH:mm" format="YYYY-MM-DD HH:mm" style="width: 190px;" @change="changeEvaluationEndTime" //如果直接选择日期有开始结束日期可能会相等 :disabled-date="disabledEndDate" :disabled-hours="disabledEndHours" :disabled-minutes="disabledEndMinutes" ></el-date-picker> </el-form-item> </div> </el-form-item> data:{ return{ form: { EvaluationStartTime: '', EvaluationEndTime: '', } } }, methods: { // 当结束时间变化时的处理逻辑 changeEvaluationEndTime() { const startTime = new Date(this.form.EvaluationStartTime).getTime(); const endTime = new Date(this.form.EvaluationEndTime).getTime(); // 如果结束时间小于或等于开始时间 if (startTime >= endTime) { this.form.EvaluationEndTime = ""; // 清空结束时间 ElMessage.warning('结束时间需要大于开始时间'); // 提示用户 这里我引入了ElMessage } }, // 禁用结束日期 disabledEndDate(date) { if (!this.form.EvaluationStartTime) { return true; // 如果开始时间为空，禁用所有日期 } const startDate = new Date(this.form.EvaluationStartTime); return date.getTime() < startDate.setHours(0, 0, 0, 0); // 禁用早于开始日期的日期 }, // 禁用结束时间的小时 disabledEndHours() { if (!this.form.EvaluationStartTime || !this.form.EvaluationEndTime) { return []; // 如果开始时间或结束时间为空，不禁用任何小时 } const startDate = new Date(this.form.EvaluationStartTime); const endDate = new Date(this.form.EvaluationEndTime); // 如果结束日期与开始日期是同一天，则禁用早于开始时间的小时 if (startDate.toDateString() === endDate.toDateString()) { const startHour = startDate.getHours(); const disabledHours = []; for (let i = 0; i < startHour; i++) { disabledHours.push(i); } return disabledHours; } return []; // 如果不是同一天，不禁用任何小时 }, // 禁用结束时间的分钟 disabledEndMinutes(selectedHour) { if (!this.form.EvaluationStartTime || !this.form.EvaluationEndTime) { return []; // 如果开始时间或结束时间为空，不禁用任何分钟 } const startDate = new Date(this.form.EvaluationStartTime); const endDate = new Date(this.form.EvaluationEndTime); // 如果结束日期与开始日期是同一天，并且选中的小时与开始时间的小时相同，则禁用早于开始时间的分钟 if (startDate.toDateString() === endDate.toDateString() && selectedHour === startDate.getHours()) { const startMinute = startDate.getMinutes(); const disabledMinutes = []; for (let i = 0; i <= startMinute; i++) { disabledMinutes.push(i); // 禁用所有早于或等于开始分钟的分钟 } return disabledMinutes; } return []; // 如果不是同一天或不同小时，不禁用任何分钟 }, },