ElementUI中日期选择器级联

需求：

开始日期始终小于或等于结束日期

实现方式：

template中的结构如下：

		//  开始时间 
		<el-date-picker
                v-model="query.beginTime" value-format="yyyy-MM-dd"
                type="date" placeholder="选择日期" @change="changeBeginTime">
        </el-date-picker>
        <span>至</span>
        //  结束时间
        <el-date-picker
                v-model="query.endTime" value-format="yyyy-MM-dd"
                type="date" :picker-options="pickerOptions"
                placeholder="选择日期">
        </el-date-picker>

通过pickerOptions限制结束日期。 pickerOptions为elementUI提供的属性，控制时日期禁用，此处用于控制结束日期，使得结束日期小于开始日期时的部分保持禁用状态。

data() {
      return {
      	// 默认显示近三十天
        query: {
          beginTime: beforeDate(30),
          endTime: newDate(),
        },
        //  pickerOptions为elementUI提供的属性
        pickerOptions: {
          disabledDate: (time) => {
            return time.getTime() < new Date(this.query.beginTime).getTime() - 1000 * 60 * 60 * 24;
          }
        },
      }
    },

监听开始时间的选择。 当开始时间大于当前结束时间的时候，主动对结束时间进行赋值，调整二者使其保持一致。

methods: {
	// 调整开始时间
 	changeBeginTime(val) {
        let beginTime = new Date(val).getTime();
        let endTime = new Date(this.query.endTime).getTime();
        if (beginTime > endTime) {
          this.query.endTime = val;
        }
      }
}

• 点赞
• 收藏
• 分享
• • 文章举报

zqian1994 发布了34 篇原创文章 · 获赞 37 · 访问量 30万+ 私信 关注

标签：级联,ElementUI,getTime,pickerOptions,日期,beginTime,query,endTime,选择器
来源： https://blog.csdn.net/zqian1994/article/details/104631070