el-date-picker自定义开始时间、结束时间禁用

最新推荐文章于 2024-07-07 15:29:40 发布

张杰给我一张演唱会门票

最新推荐文章于 2024-07-07 15:29:40 发布

阅读量1.3k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_50215564/article/details/125190681

版权

el-date-picker disabledDate 开始时间结束时间时间范围限制

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

想实现的效果是：一个开始时间，一个结束时间，用户只能在这个范围内选则，其他禁用
效果图如下：
在这里插入图片描述
因为用到的地方比较多，所以写了一个公共的方法，我们传参进去就行啦~
Js代码如下：

// 禁止选择开始时间-结束时间公共方法
getPickOptions(startTime, endTime) {
  this.pickerOptions = {
    disabledDate(time) {
      return (
        new Date(time).getTime() < new Date(startTime).getTime() ||
        new Date(time).getTime() > new Date(endTime).getTime()
      );
    },
  };
},

当当当~ 众所周知，el-date-picker有个属性：:picker-options=“pickerOptions” 参数为disabledDate 设置禁用状态，参数为当前日期，

data里面自定义pickerOptions ：{}对象

就是这样，over！