vue element ui 开始时间不大于结束时间 结束时间不小于开始时间

项目中经常在表单里有开始时间和结束时间俩个选择框，但要对时间进行控制，开始时间不大于结束时间 结束时间不小于开始时间

 <el-form ref="form" :model="form" :rules="formRules">
        <el-row>
            <el-col :span="9">
                <el-form-item prop="startTime" label="项目开始时间">
                    <el-date-picker
                    v-model="form.startTime"
                    value-format = "yyy-MM-dd"
                    type="date"
                    :picker-options ="startDatePicker" 
                    placeholder="选择开始时间">
                  </el-date-picker>           
                </el-form-item>
            </el-col>
            <el-col : span="9">
                <el-form-item prop="overTime" label="项目开始时间">
                    <el-date-picker
                    v-model="form.overTime"
                    value-format = "yyy-MM-dd"
                    type="date"
                    :picker-options ="overDatePicker"
                    placeholder="选择结束时间">
                  </el-date-picker>           
                </el-form-item>
            </el-col>
        </el-row>   
</el-form>

2.data

 data() {
        return {
            startDatePicker: {
                disabledDate: time =>{
                    if(this.form.overTime) {
                    return time.getTime() >new Date(this.form.overTime)
                }
                }
                
            },
            overDatePicker: {
                disabledDate: time =>{
                    if(this.form.startTime) {
                    return time.getTime() < new Date(this.form.startTime) - 1000*3600*24
                }
                }               
            },
        }
    }

3.去除日期时间选择器里的此刻按钮,给 el-date-picker 标签定义一个 class属性

重点： class="date_picker"

在样式里面写入 

<style>
.el-picker-panel__footer .el-button--text.el-picker-panel__link-btn {
    display: none;
  }
</style>

切记： 重启项目就可以去除此刻按钮！