Element 组件时间范围波动的写法

最新推荐文章于 2024-09-18 14:59:12 发布

转载最新推荐文章于 2024-09-18 14:59:12 发布 · 403 阅读

文章标签：

#element

vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用Element UI的日期选择器组件实现日期范围的选择，并通过JS代码设置日期选择的限制条件，包括禁选特定日期范围和监听日期选择事件。

前端

<el-date-picker
 	 v-model="updateval"
    	 type="daterange"
    	 range-separator="-"
     	 start-placeholder="开始日期"
    	 end-placeholder="结束日期"
     	:picker-options="UpadtePo"
	 value-format="yyyy-MM-dd">
</el-date-picker>

js代码

export default {
  data() {
    return {
      UpadtePo: {
        onPick: ({ maxDate, minDate }) => {
          this.choiceDate = minDate.getTime();
          if (maxDate) {
            this.choiceDate = "";
          }
        },
        disabledDate: time => {
          if (this.choiceDate!='') {
            const one = 30 * 24 * 3600 * 1000;
            const minTime = this.choiceDate - one;
            const maxTime = this.choiceDate + one;
            return time.getTime() < minTime || time.getTime() > maxTime;
          }
        }
      }
    };
  }

参考：https://blog.youkuaiyun.com/carmen_shao/article/details/83622134