element-ui el-date-picker 实现限制开始时间和结束时间

最新推荐文章于 2024-04-18 11:35:50 发布

薛小胖And汤小懒

最新推荐文章于 2024-04-18 11:35:50 发布

阅读量772

点赞数

分类专栏： element-ui 文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/xuezepeng18729875380/article/details/134357593

版权

element-ui 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章介绍了如何在不使用Element-UI内置时间组件的情况下，通过自定义`picker-options`中的`getDisabledTime`方法来控制时间选择器的开始和结束时间。作者提供了两种实现方式，一种是利用dayJs库进行时间比较，另一种是无dayJs依赖的版本.

摘要由CSDN通过智能技术生成

前提：在没有使用element-ui 时间组件的范围选择时，使用了单独的时间选择的情况下需要控制开始时间和结束时间的控制

el-date-picker的属性中提供了当前时间选择器的特有选项这个属性可以控制当前的选项有哪些

具体实现：

// dom结构
<el-date-picker
    v-model="formData.startTime"
    type="datetime"
    format="yyyy-MM-dd HH:mm:ss"
    value-format="yyyy-MM-dd HH:mm:ss"
    :picker-options="getDisabledTime(formData.endTime, 'start')"
    placeholder="请选择计划开始时间"
    style="width: 100%"
/>

<el-date-picker
    v-model="formData.endTime"
    type="datetime"
    format="yyyy-MM-dd HH:mm:ss"
    value-format="yyyy-MM-dd HH:mm:ss"
    :picker-options="getDisabledTime(formData.startTime, 'end')"
    placeholder="请选择计划结束时间"
    style="width: 100%"
/>

// 方法
getDisabledTime() {
  return (pTime, flag) => {
    return {
      disabledDate: (time) => {
        if (pTime === null || pTime === undefined || pTime === '') {
          return false
        } else {
          if (flag === 'start') {
            return dayJs(time).valueOf() > dayJs(pTime).valueOf()
          } else if (flag === 'end') {
            return dayJs(time).valueOf() < dayJs(pTime).add(1, 'day').valueOf()
          }
        }
      }
    }
  }
}

因为我的项目中还有其余的时间处理需求，在我的方法中使用了 dayJs插件进行了时间的计算，如果你没有安装 dayJs 的依赖，可以根据下面的方法进行处理

disabledDate: (time) => {
  if (pTime === null || pTime === undefined || pTime === '') {
    return false
  } else {
    const timeStr = new Date(pTime.replace(/-/g, '/'))
    if (flag === 'start') {
      return time.getTime() > timeStr 
    } else if (flag === 'end') {
      return time.getTime() < timeStr 
    }
  }
}

推荐使用dayJs 去进行时间的处理