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

发布于:2025-03-06 ⋅ 阅读:(101) ⋅ 点赞:(0)

效果

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

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

 

 

 

 


网站公告

今日签到

点亮在社区的每一天
去签到