实现目的:
使用type="data"类型实现具备开始日期与结束日期组件(ps:element有自带的type="daterange"类型的组件可以实现此功能)
1、开始日期和结束日期都被限制只能选择早于当天（包括当天）的日期
2、选择完开始日期，选择结束日期时，只能选择开始日期到当天日期的范围
3、先选择结束日期，再选择开始日期，则只能选择结束日期之前的范围
代码：
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.3.3/lib/index.js"></script>
<div id="app">
<template>
<div class="block">
<span class="demonstration">默认</span>
<el-date-picker
v-model="value2"
align="right"
type="date"
placeholder="选择日期"
:picker-options="startDatePicker">
</el-date-picker>
<el-date-picker
v-model="value3"
align="right"
type="date"
placeholder="选择日期"
:picker-options="endDatePicker">
</el-date-picker>
</div>
</template>
</div>
var Main = {
data() {
return {
value2: '',
value3: '',
startDatePicker:this.beginDate(),
endDatePicker:this.processDate()
};
},
methods: {
beginDate(){
let self = this
return {
disabledDate(time){
return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
}
}
},
//提出结束时间必须大于提出开始时间
processDate(){
let self = this
return {
disabledDate(time){
if(self.value2){
return new Date(self.value2).getTime() > time.getTime() || time.getTime() > Date.now()
}else{
return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
}
}
}
}
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
@import url("//unpkg.com/element-ui@2.3.3/lib/theme-chalk/index.css");