el-date-picker组件自主开发时间段

最新推荐文章于 2025-04-29 17:46:09 发布

原创最新推荐文章于 2025-04-29 17:46:09 发布 · 282 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

前端开发总结同时被 2 个专栏收录

8 篇文章

订阅专栏

个人总结

5 篇文章

订阅专栏

本文介绍如何使用Element-UI的el-date-picker组件通过picker-options属性和disabledDate方法，实现起始时间和结束时间的相互限制，确保起始时间不会大于结束时间，反之亦然。

element-ui --el-date-picker组件自主开发时间段，起始时间不能大于结束时间，结束时间不能小于起始时间

<!-- template-->
<el-date-picker
    v-model="startTime"
    type="date"
    placeholder="强制开始时间"
    style="width:100%"
    format="yyyy-MM-dd"
    :picker-options="startDatePicker"
    ref="pickerStart"
></el-date-picker>

<el-date-picker
    v-model="EndTime"
    type="date"
    placeholder="强制开始时间"
    style="width:100%"
    format="yyyy-MM-dd"
    :picker-options="endDatePicker"
    ref="pickerStart"
></el-date-picker>

<!-- script-->
data(){
    startDatePicker:this.beginDate(),
    endDatePicker:this.endDate(),
}
beginDate(){  //起始时间修改
   let _this = this;
   return {
      disabledDate(time){
          if(_this.from.enforcementTimeEnd){
              return new Date(_this.from.enforcementTimeEnd).getTime() < time.getTime();   //结束时间不为空时，小于结束时间
          }else{
              // return time.getTime() > Date().now();   //开始时间不选，结束时间最大值小于等于当天
          }
       }
   }
},
endDate(){   //结束时间
   let _this = this;
   return {
      disabledDate(time){
          if(_this.from.enforcementTimeBegin){
              return new Date(_this.from.enforcementTimeBegin).getTime() >time.getTime();   //结束时间不为空时，小于结束时间
          }else{
              // return time.getTime() > Date().now();   //开始时间不选，结束时间最大值小于等于当天
          }
      }
   }
},

只要是利用 picker-options属性里边的disabledDate方法来对时间的选择进行控制