Element UI——日期时间选择器el-date-picker开始时间与结束时间约束解决方案

最新推荐文章于 2025-03-30 15:01:12 发布

Starzkg

最新推荐文章于 2025-03-30 15:01:12 发布

阅读量2.9w

点赞数 9

分类专栏： # JavaScript 文章标签： JavaScript Vue ElementUI

原文链接：https://www.cnblogs.com/luoxuemei/p/9667652.html

版权

JavaScript 专栏收录该内容

117 篇文章

订阅专栏

本文详细解析了Element UI中el-date-picker组件如何设置时间选择的约束条件，包括开始时间和结束时间的相互依赖，以及如何限制用户只能选择未来一定范围内的日期。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方文档

https://element.eleme.cn/#/zh-CN/component/datetime-picker

问题分析

el-date-picker组件需要 :picker-options属性，属性值为data,data的数据来自于methods中的方法。

主要涉及对disabledDate参数的设置。

解决方案

<el-form-item label="开始时间" prop="startTime" >
  <el-date-picker v-model="form.startTime"  format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" clearable style="width: 100%"
                  :picker-options="startDatePicker" :disabled="dialogStatus=='view'" type="datetime"  :placeholder="dialogStatus=='view'?'':'请输入订阅开始时间'"></el-date-picker>
</el-form-item>
<el-form-item label="结束时间" prop="endTime">
  <el-date-picker v-model="form.endTime"  format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" clearable style="width: 100%"
                  :picker-options="endDatePicker"  :disabled="dialogStatus=='view'" type="datetime"  :placeholder="dialogStatus=='view'?'':'请输入订阅结束时间'"></el-date-picker>
</el-form-item>


data() {
  return {
    startDatePicker: this.beginDate(),
    endDatePicker: this.processDate(),
　　}
}
beginDate(){
  const self = this
  return {
    disabledDate(time){
      if (self.form.endTime) {  //如果结束时间不为空，则小于结束时间
        return new Date(self.form.endTime).getTime() < time.getTime()
      } else {
        // return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
      }
    }
  }
},
processDate() {
  const  self = this
  return {
    disabledDate(time) {
      if (self.form.startTime) {  //如果开始时间不为空，则结束时间大于开始时间
        return new Date(self.form.startTime).getTime() > time.getTime()
      } else {
        // return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
      }
    }
  }
}

扩展方案

1、只可以选择今天以及今天以后的时间：

pickerOptions0: {
  disabledDate(time) {
    return time.getTime() < Date.now() - 8.64e7;//8.64e7=1000*60*60*24一天
  }
},

2、只可以选择今天以及今天以后十天之内的时间：

        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7 || time.getTime() > Date.now() + 10 * 8.64e7;//8.64e7=1000*60*60*24一天
          }
        },

3、如果开始时间不为空，则结束时间大于开始时间,且大于当前时间

processDate() {
  const  self = this
  return {
    disabledDate(time) {
      if (self.form.beginTime) {  //如果开始时间不为空，则结束时间大于开始时间,且大于当前时间
        return new Date(self.form.beginTime).getTime() > time.getTime() || time.getTime() < Date.now() - 1000*3600*24
      } else {
        return time.getTime() < Date.now() - 1000*3600*24//开始时间不选时，结束时间最大值大于等于当天
      }
    }
  }
},