Vue+element 完成结束时间大于开始时间，开始时间小于结束时间

  项目很多时候会遇到这个开始，结束时间选择的场景，如果没有做限制就会出现结束时间可以小于开始时间的问题，用户体验很不好。

html：

                 <el-form-item label="汇交开始时间" >

                        <el-date-picker  :picker-options="pickerStartTime" v-model="form.startTime" type="date"

                          value-format="yyyy-MM-dd" format="yyyy 年 MM 月 dd 日" placeholder="选择汇交开始时间">

                        </el-date-picker>

                    </el-form-item>

                    <el-form-item label="汇交结束时间">

                        <el-date-picker  :picker-options="pickerEndTime" v-model="form.endTime" type="date"

                         value-format="yyyy-MM-dd" format="yyyy 年 MM 月 dd 日" placeholder="选择汇交结束时间">

                        </el-date-picker>

                    </el-form-item>

 

data:

computed:

对开始，结束时间的禁用 ，发现很多文章会直接写进data里this.startTime，会获取不到这个选择的时间，于是写进computed

 

computed: {

                pickerStartTime() {

                    let _this = this;

                    return {

                        disabledDate: time => {

                            if(_this.form.endTime){

                                let edtTime = _this.form.endTime.replace(/-/g, '/');

                                return time.getTime() > new Date(edtTime)

                            }

                        }

                    }

                },

                pickerEndTime() {

                    let _this = this;

                    return {

                        disabledDate: time => {

                            if(_this.form.startTime){

                                let startTime = _this.form.startTime.replace(/-/g, '/');

                                return time.getTime() < new Date(startTime)

                            }

                        }

                    }

                }

            },

 

 因为html里面写了value-format="yyyy-MM-dd"，所以要在这里把-转化掉，然后new Data格式化一下时间，disabledDate是element自带的禁用参数，到这里就完成了。