element 的日期选择器组件提供给我们很好的日期选择控件，有很强大的功能，因为在它自己封装好的关于时间范围组件，有时候不满足我们的需求，所以我们需要自己封装
看官网介绍date-picker
这是我们需要的样式
date.png
date.png
有一个属性非常重要，我们可以根据这个属性去达到功能
- 这里有一点要注意，如果使用了value-format="yyyy-MM-dd"去格式日期显示方式，那么就无法达到判断，如果要返回yyyy-MM-dd格式，自己写一个方法去格式化
- 网上有很多关于时间限制的例子，但是有一个问题就是开始和结束都选择，在删除开始就无法选择，现在这种方法去实现就没有这种bug
//html
<div class="time-select-input">
<el-date-picker v-model="starTime" type="date" placeholder="选择开始日期" :picker-options="pickerOptions0"></el-date-picker>
<div style="width:16px;height:2px;background:#888888;margin:0 15px"></div>
<el-date-picker v-model="endTime" type="date" placeholder="选择结束日期" :picker-options="pickerOptions1"></el-date-picker>
</div>
//js
data(){
return {
starTime:'',
endTime:'',
pickerOptions0: {
disabledDate: (time) => {
if (this.endTime) {
return time.getTime() > this.endTime
}
}
},
pickerOptions1: {
disabledDate: (time) => {
if(this.starTime){
return time.getTime() < this.starTime
}
}
},
}
},
希望对大家有用！
