elementui el-date-picker 开始时间结束时间时间约束

F2601775592

已于 2024-01-29 09:44:53 修改

阅读量820

点赞数 7

文章标签： elementui vue.js 前端

于 2024-01-25 14:39:00 首次发布

本文链接：https://blog.csdn.net/F2601775592/article/details/135844144

版权

本文介绍了如何在Vue项目中使用ElementUI的el-date-picker组件时，设置picker-options属性和自定义disabledDate方法来限制日期选择范围，包括允许开始时间等于结束时间的情况。

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

给el-date-picker添加picker-options属性

<el-date-picker v-model="openForm.startRealTime" placeholder="请选择" :picker-options="startDatePicker" clearable
              :style='{ "width": "100%" }' type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
</el-date-picker>
<el-date-picker v-model="openForm.endRealTime" :picker-options="endDatePicker" placeholder="请选择" clearable
              :style='{ "width": "100%" }' type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
</el-date-picker>

 data() {
    return {
      startDatePicker: this.beginDate(),
      endDatePicker: this.processDate(),
    }
}

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

如果结束时间可以等于开始时间的话可以在processDate方法中添加

 processDate() {
      const self = this;
      return {
        disabledDate(time) {
          if (self.dataForm.startPlanTime) {
            //如果开始时间不为空，则结束时间大于开始时间
            return (
              new Date(self.dataForm.startPlanTime).getTime() - 86400000 >= time.getTime()
            );
          } else {
            // return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
          }
        }
      };
    },