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

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

 

 

 

 


http://www.kler.cn/a/570292.html

相关文章:

  • 迷你世界脚本游戏接口:Game
  • 【C语言】联合体妙用之:数据类型转换
  • 聊聊学习之数据-信息-知识-洞见-智慧-影响力
  • Django 项目模块化开发指南:实现 Vue 风格的组件化
  • Lasso回归、Ridge岭回归
  • 常见webshell工具的流量特征
  • 贪心算法+题目
  • 打造个人知识库(Page Assist版)- 私人专属AI-本地化部署deepseek
  • 电源测试系统有哪些可以利用AI工具的科技??
  • 2025 年:SAP 咨询的关键转折点
  • Qt镜像地址
  • 【虚拟机 IP 配置深度剖析】
  • Javaee:IO和文件操作
  • 【机器人手眼标定算法简介】
  • 【算法】acwing算法基础875. 快速幂
  • Tauri跨端笔记实战(4) - 如何实现系统级截图
  • 通过电脑怎么安装和删除ios手机上的app
  • 究竟什么是AI提示词?深入解析与实战应用
  • STL——list的介绍和模拟实现
  • 【三.大模型实战应用篇】【5.自然语言转SQL:AI与数据库的无缝对接】