当前位置: 首页 > news >正文

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

 

 

 

 

相关文章:

  • OpenCV计算摄影学(11)色调映射算法类cv::TonemapDrago
  • 【量化策略】网格交易策略
  • 本地安装git
  • Sass基础
  • Django框架下html文件无法格式化的解决方案
  • 初识Qt · Qt的基本认识和基本项目代码解释
  • Firefox缩小标签页高度以及自定义调整
  • PDF文本转曲线轮廓 ​PDF转图片、提取文本和图片
  • 高性能采集服务上线回顾
  • Leetcode 209 长度最小的子数组
  • RX580双卡32GB显存跑DeepSeek-R17b、8b、14b、32b实测
  • vue3+vant4+js的移动端项目,每次部署完项目后,部分点击跳转至新页面的事件就失效了,不跳转,也不报错,如何解决?
  • Linux知识-第一天
  • SpringBoot集成Netty实现Ws和Tcp通信
  • 初探WebAssembly
  • 什么是组态软件?
  • Kotlin 类委托与属性委托
  • 图论-岛屿数量
  • 什么是分布式和微服务?
  • 第一章:6.差分+前缀和(一个区域整体添加一个数)
  • 习近平结束对俄罗斯国事访问并出席纪念苏联伟大卫国战争胜利80周年庆典回到北京
  • 印度最新发声:对所有敌对行动均予以反击和回应,不会升级冲突
  • 上海证监局规范辖区私募经营运作,6月15日前完成自评自纠
  • 时隔14个月北京怀柔区重启供地,北京建工以3.59亿元摘得
  • 习近平同俄罗斯总统普京举行会谈
  • 绍兴柯桥:用一块布托起中国制造的新经纬