el-date-picker picker-options属性中disabledDate设置时间的禁用和启用，并且支持到时分秒的禁用和启用

最新推荐文章于 2025-03-04 10:13:23 发布

alexbai!

最新推荐文章于 2025-03-04 10:13:23 发布

阅读量554

点赞数 2

文章标签： vue.js javascript elementui

本文链接：https://blog.youkuaiyun.com/cp3___/article/details/143718626

版权

默认picker-options 是配置的对象，如果代码中只存在一个开始时间或者一个结束时间，可以直接设置成对象进行配置
我这里的应用场景是在表格中存在多个时间的配置项
- 使用到了dayjs作为时间判断，也可以自行根据js来实现判断
- 需要将picker-options 做成函数，应为表格每一行中都存在一个开始和结束时间，需要把每一行的开始和结束时间传递过去进行判断
- 所以可以将picker-options当作函数，参数传递为对应需要进行处理开始和结束时间，返回值 picker-options 配置的参数
- selectableRAnge 可以支持到时分秒的判断，例如结束时间的配置，需要拿到开始时间的时分秒，设置为自己时间可选范围的区间

以下是代码部分

data() {
    return {
      // 结束时间的禁用
      endPickerOptions: function (item) {
        return {
          disabledDate: function (time) {
            if(!item.startTime) return false
            // 比较是否为同一天，如果组件中需要选择时分秒，则会出现开始时间和结束时间同一天无法选择的问题，需要加上判断，不需要时分秒可以去掉这行，开始和结束判断一样
            if(item.startTime && item.endTime && dayjs(item.startTime).format('YYYY-MM-DD') === dayjs(item.endTime).format('YYYY-MM-DD')) {
              return false
            }
            return time.getTime() < item.startTime
          },
          selectableRange: (() => {
            if(!item.startTime) return [`00:00:00 - 23:59:59`]
            if(item.startTime) {
              let date = new Date(item.startTime);
              let hour = date.getHours();
              let minute = date.getMinutes();
              let second = date.getSeconds();
              // 大于一天的话，时分秒可以随意选择
              if(item.endTime - item.startTime > 3600 * 24) return [`00:00:00 - 23:59:59`]
              return [`${hour}:${minute}:${second} - 23:59:59`]
            }
          })()
        }
      },
      // 开始时间的禁用
      startPickerOptions(item) {
        return {
          disabledDate: function (time) {
            if(!item.endTime) return false
            if(item.startTime && item.endTime && dayjs(item.startTime).format('YYYY-MM-DD') === dayjs(item.endTime).format('YYYY-MM-DD')) {
              return false
            }
            return time.getTime() > item.endTime
          },
          selectableRange: (() => {
            if(!item.endTime) return [`00:00:00 - 23:59:59`]
            if(item.endTime) {
              let date = new Date(item.endTime);
              let hour = date.getHours();
              let minute = date.getMinutes();
              let second = date.getSeconds();
              // 大于一天的话，时分秒可以随意选择
              if(item.endTime - item.startTime > 3600 * 24) return [`00:00:00 - 23:59:59`]
              return [`00:00:00 - ${hour}:${minute}:${second}`]
            }
          })()
        }
      },
    }
  },