自定义el-date-picker控件

最新推荐文章于 2025-05-29 10:19:15 发布

原创最新推荐文章于 2025-05-29 10:19:15 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #javascript #前端 #面试 #vue.js

需求：element ui中日历选择器控件需要定义选择时间为60 天，并且要求每次选择后都要清空限制

具体代码如下;

<!--html标签-->
 <el-date-picker
                  v-model="saveForm.dateselect"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                  style="width: 100%"
                  :editable = "false"
                  :picker-options="auditTimeListOptions"
                />

bottomMinDate: '',
topMaxDate: '',
auditTimeListOptions: {
   onPick: ({
        maxDate,
        minDate
   }) => {
        // 向上7天
        this.bottomMinDate = minDate.getTime() + 6 * 86400000;
        // 向下七天
        this.topMaxDate = minDate.getTime() - 6 * 86400000;
        if (maxDate) {
            this.bottomMinDate = '';
            this.topMaxDate = '';
             }
         },
          disabledDate: time => {
            if (this.bottomMinDate !== '') {
              return time.getTime() > this.bottomMinDate || time.getTime() < this.topMaxDate;
    }
  },
},

这种选择方式的好处是在每次选择最大值之后都清空最大值和最小值，不会影响下次选择