element-push el-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 []; // 如果不是同一天或不同小时,不禁用任何分钟
},
},