element 的日期选择器组件提供给我们很好的日期选择控件，有很强大的功能，因为在它自己封装好的关于时间范围组件，有时候不满足我们的需求，所以我们需要自己封装

看官网介绍date-picker
这是我们需要的样式

date.png

date.png

有一个属性非常重要，我们可以根据这个属性去达到功能

1. 这里有一点要注意，如果使用了value-format="yyyy-MM-dd"去格式日期显示方式，那么就无法达到判断，如果要返回yyyy-MM-dd格式，自己写一个方法去格式化
2. 网上有很多关于时间限制的例子，但是有一个问题就是开始和结束都选择，在删除开始就无法选择，现在这种方法去实现就没有这种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
                    }
                }
            },
        }
    },

希望对大家有用！