element-ui 限制日期选择的方法(datepicker)

element-ui是饿了么前端团队推出的一款基于vue.js 2.0 的桌面端ui框架，手机端有对应框架是 mint ui 。

需求场景如下：

1. 指定起止日期，后选的将会受到先选的限制
2. 不同的日期选择器，不过也存在关联关系

实现方法不难，利用了 change 事件，动态改变 picker-options 中的 disabledate 即可。

查看demo

template

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.3.8/lib/index.js"></script>
<div id="app">
<template>
 <div class="block">
  <span class="demonstration">起始日期</span>
  <el-date-picker v-model="startdate" type="date" placeholder="选择日期" :picker-options="pickeroptionsstart" @change="changeend">
  </el-date-picker>
 </div>
 
 <div class="block">
  <span class="demonstration">截止日期</span>
  <el-date-picker v-model="enddate" type="date" placeholder="选择日期" :picker-options="pickeroptionsend" @change="changestart">
  </el-date-picker>
 </div>
</template>
</div>

script

var main = {
  data() {
   return {
    pickeroptionsstart: {},
    pickeroptionsend:{},
    startdate: '',
    enddate: '',
   };
  },
  methods:{
   changestart (){
    this.pickeroptionsstart = object.assign({},this.pickeroptionsstart,{
     disableddate: (time) => {
      return time.gettime() > this.enddate
     }
    })
   },
   changeend (){
    this.pickeroptionsend = object.assign({},this.pickeroptionsend,{
     disableddate: (time) => {
      return time.gettime() < this.startdate
      }
    })
   }
  }
 };
var ctor = vue.extend(main)
new ctor().$mount('#app')

style

@import url("//unpkg.com/element-ui@2.3.8/lib/theme-chalk/index.css");

.block{
 margin-top:10px;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。