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

  • 默认picker-options 是配置的对象,如果代码中只存在一个开始时间或者一个结束时间,可以直接设置成对象进行配置

  • 我这里的应用场景是在表格中存在多个时间的配置项

    • 使用到了dayjs作为时间判断,也可以自行根据js来实现判断
    • 需要将picker-options 做成函数,应为表格每一行中都存在一个开始和结束时间,需要把每一行的开始和结束时间传递过去进行判断
    • 所以可以将picker-options当作函数,参数传递为对应需要进行处理开始和结束时间,返回值 picker-options 配置的参数
    • selectableRAnge 可以支持到时分秒的判断,例如结束时间的配置,需要拿到开始时间的时分秒,设置为自己时间可选范围的区间
  • 以下是代码部分
    *

    javascript 复制代码
    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}`]
                }
              })()
            }
          },
        }
      },
相关推荐
小鹿软件办公1 分钟前
倒计时开启:Chromium 宣布几周内将全面切断 MV2 扩展支持
开发语言·javascript·ublock origin
Csvn40 分钟前
TypeScript:你以为安全的 `JSON.parse` 其实是颗雷 — 运行时类型安全实战
前端·javascript
触底反弹44 分钟前
从 JS 引擎执行原理理解数据类型:栈内存、堆内存与作用域
javascript·数据结构·面试
橘子星44 分钟前
深入理解线性数据结构:栈、队列与链表
前端·javascript
Larcher1 小时前
JS 数据类型的八重人格与内存真相
前端·javascript
Maimai108081 小时前
Web3 前端实时通信如何落地:从 SSE 订阅到行情、订单与账户状态更新
前端·javascript·react.js·前端框架·web3·状态模式
阿黎梨梨1 小时前
二分查找进阶:在排序数组中寻找元素的边界
javascript
昭昭颂桉a1 小时前
TypeScript 前端的必修课,从 JS 到 TS
开发语言·前端·javascript·typescript
用户938515635071 小时前
从零实现一个 Todos 应用:原生 Ajax + Node 服务,顺便吃透 JSON.stringify
前端·javascript·后端
英勇无比的消炎药1 小时前
少踩坑TinyVue插槽事件编码规范详解
vue.js