效果
本来用的是时间段,但是甲方说不好用,让换成这样的 六百六十六
<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-pickerv-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>
javascript">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 []; // 如果不是同一天或不同小时,不禁用任何分钟},
},