elementUI中分开的时间日期选择组件,控制日期的禁用

javascript 复制代码
<el-date-picker v-model="query.startTime" type="datetime" :picker-options="startPickerOptions" format="yyyy-MM-dd HH时" popper-class="date-picker" placeholder="选择日期时间"></el-date-picker>
<el-date-picker v-model="query.endTime" type="datetime" :picker-options="endPickerOptions" format="yyyy-MM-dd HH时" popper-class="date-picker" placeholder="选择日期时间"> </el-date-picker>
javascript 复制代码
 data() {
   return {
   query: {
        startTime: "",
        endTime: "",
      },
      startPickerOptions: {
        disabledDate: (time) => {
          if (this.query.endTime) {
            // 根据结束时间,向前推5天
            let timeStart = getRequiresTime(
              new Date(this.query.endTime),
              "day",
              -5
            );
            this.startPickerOptions.selectableRange = "02:00:00 - 23:59:59";
            return (
              time.getTime() > new Date(this.query.endTime).getTime() ||
              time.getTime() < new Date(timeStart).getTime()
            );
          }
        },
        selectableRange: "00:00:00 - 23:59:59",
      },
      endPickerOptions: {
        disabledDate: (time) => {
          if (this.query.startTime) {
            // 根据开始时间,向后推5天
            let timeEnd = getRequiresTime(
              new Date(this.query.startTime),
              "day",
              5
            );
            this.endPickerOptions.selectableRange = "04:00:00 - 23:59:59";
            return (
              new Date(this.query.startTime).getTime() > time.getTime() ||
              time.getTime() > new Date(timeEnd).getTime()
            );
          }
        },
        selectableRange: "00:00:00 - 23:59:59",
      },
    }
}
javascript 复制代码
// 半年,1年,3年前后的时间获取
export function getRequiresTime(time, type = null, number = 0) {
  var nowdate = new Date(time);
  switch (type) {
    case "day": //取number天前、后的时间
      nowdate.setTime(nowdate.getTime() + (24 * 3600 * 1000) * number);
      var y = nowdate.getFullYear();
      var m = nowdate.getMonth() + 1;
      var d = nowdate.getDate();
      var retrundate = y + '-' + (m >= 10 ? m : '0' + m) + '-' + (d >= 10 ? d : '0' + d);
      break;
    case "week": //取number周前、后的时间
      var weekdate = new Date(nowdate + (7 * 24 * 3600 * 1000) * number);
      var y = weekdate.getFullYear();
      var m = weekdate.getMonth() + 1;
      var d = weekdate.getDate();
      var retrundate = y + '-' + (m >= 10 ? m : '0' + m) + '-' + (d >= 10 ? d : '0' + d);
      break;
    case "month": //取number月前、后的时间
      nowdate.setMonth(nowdate.getMonth() + number);
      var y = nowdate.getFullYear();
      var m = nowdate.getMonth() + 1;
      var d = nowdate.getDate();
      var retrundate = y + '-' + (m >= 10 ? m : '0' + m) + '-' + (d >= 10 ? d : '0' + d);
      break;
    case "year": //取number年前、后的时间
      nowdate.setFullYear(nowdate.getFullYear() + number);
      var y = nowdate.getFullYear();
      var m = nowdate.getMonth() + 1;
      var d = nowdate.getDate();
      var retrundate = y + '-' + (m >= 10 ? m : '0' + m) + '-' + (d >= 10 ? d : '0' + d);
      break;
    default: //取当前时间
      var y = nowdate.getFullYear();
      var m = nowdate.getMonth() + 1;
      var d = nowdate.getDate();
      var retrundate = y + '-' + (m >= 10 ? m : '0' + m) + '-' + (d >= 10 ? d : '0' + d);
  }
  return retrundate;
}
相关推荐
10年前端老司机2 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程6 小时前
2025前端面试题
前端·面试
前端小趴菜057 小时前
React - createPortal
前端·vue.js·react.js
晓13137 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo8 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴8 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
军军君019 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具四:后端项目基础框架搭建下
spring boot·spring·面试·elementui·typescript·uni-app·mybatis
chao_7899 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼10 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原10 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序