iView添加开始结束时间控件的范围限制

// 控件代码
<DatePicker :options="change_begin_date_options" @on-change="changeBeginDateEvent" placeholder="选择开始时间" style="width: 200px" format="yyyy-MM-dd" v-model="change_begin_date"></DatePicker><DatePicker :options="change_end_date_options" @on-change="changeEndDateEvent" placeholder="选择结束时间" style="width: 200px" format="yyyy-MM-dd" v-model="change_end_date"></DatePicker>

1、解释

• @on-change="changeBeginDateEvent" 选择开始时间后，针对数据进行转换，用于设定结束时间控件的options。
• :options="change_begin_date_options" 设置开始时间控件的规则。以下是iView官网的规则。

2、数据转换和设定options

// vue文件的data
data () { 
   return {
     change_begin_date_options: {},
     change_end_date_options: {},
     change_begin_date: '',
     change_end_date: ''
   }
}
methods: {
   changeBeginDateEvent (e) {      
     let startTime = e ? new Date(e).valueOf() : ''      
     this.change_end_date_options = {        
        disabledDate: date => {          
           return date && (date.valueOf() < startTime - 86400000)        
        }      
     }    
    },    
   changeEndDateEvent (e) {      
     let endTime = e ? new Date(e).valueOf() : ''      
     this.change_begin_date_options = {        
       disabledDate(date) {          
         if (!endTime) return false          
         return date && date.valueOf() > endTime + 86400000        
       }      
     }    
   }
}

3、升级版