element-ui 时间选择加限制

组件里的代码(HTML代码 )添加限制:picker-options="pickerOptions0":

<div>
            <span class="demonstration">起止时间:</span>
            <el-date-picker
                v-model="startTime"
                type="month"
                size="small"
                value-format="yyyyMM"
                format="yyyy-MM"
                placeholder="开始时间"
                :picker-options="pickerOptions0">
            </el-date-picker>
            至
            <el-date-picker
                v-model="endTime"
                type="month"
                size="small"
                value-format="yyyyMM"
                format="yyyy-MM"                
                placeholder="结束时间"
                :picker-options="pickerOptions1">
            </el-date-picker>
            <el-button size="small" type="primary" @click="queryForTime">查询</el-button>
          </div>

script(vue实例)里面的代码,记的var oper =  new Vue({}),因为里面用到oper,

这个是限制  :  开始时间不能大于结束时间,结束时间不能小于开始时间

<script>
   var oper =  new Vue({
    el: '#operateDiv',
    data: {               
        startTime:'',//开始时间
        endTime:'',//结束时间
        pickerOptions0:{
            disabledDate(time) {
                if(typeof(oper.endTime)===undefined||oper.endTime===''){
                    return time.getTime() > Date.now();                    
                }else{
                    var sta = oper.endTime.substring(0,4)+'/'+oper.endTime.substring(4,6)+'/01'
                    return time.getTime() > new Date(sta).getTime() || time.getTime() > Date.now();
                }                
          }},
          pickerOptions1:{
            disabledDate(time) {
                if(typeof(oper.startTime)===undefined||oper.startTime===''){
                    return time.getTime() > Date.now();                    
                }else{
                    var sta = oper.startTime.substring(0,4)+'/'+oper.startTime.substring(4,6)+'/01'
                    return time.getTime() < new Date(sta).getTime() || time.getTime() > Date.now();
                }                
          }},
    },
})

 

运行结果:

 

element-ui 时间选择加限制