elementUI 日期选择器 范围控制

先选择开始日期,控制结束日期的选择范围 

先选择开始日期,控制结束日期的选择范围 

 <div class="wrap_box">
      <div class="wrap_boxtit">选择日期：</div>
      <div class="wrap_boxinp">
             <el-date-picker style="width:150px;"
                                    v-model.trim="startData"
                                    type="date"
                                    clearable
                                    value-format="yyyy-MM-dd"
                                    @change="change()"
                                    :picker-options="pickerOptionsStart"
                                    placeholder="开始日期">
             </el-date-picker>
      </div>
      <div style="line-height:40px;padding: 0 5px;">—</div>
      <div class="wrap_boxinp">
            <el-date-picker style="width:150px;"
                                    v-model.trim="endData"
                                    type="date"
                                    clearable
                                    value-format="yyyy-MM-dd"
                                    @change="change()"
                                    :picker-options="pickerOptionsEnd"
                                    placeholder="结束日期">
            </el-date-picker>
      </div>
</div>

 

 

data() {
        return {
            startData: "",
            endData: "",
            pickerOptionsStart: {
                disabledDate:(time)=>{
                    if (this.endData) {
                        var endTime = new Date(this.endData).valueOf();
                    }
                    // var startTime = Date.now() - 8.64e7;
                    // return (
                    //     (time && time.valueOf() < startTime) ||
                    //     time.valueOf() > endTime
                    // );
                    return  time.valueOf() > endTime;
                },
            },
            pickerOptionsEnd: {
                disabledDate:(time)=>{
                    if (this.startData) {
                        // 让用户可以选择开始结束同一天
                        var startTime =
                            new Date(this.startData).valueOf() - 8.64e7 + 1;
                    } else {
                        // var startTime = Date.now() - 8.64e7;
                        return false;
                    }
                    return time && time.valueOf() < startTime;
                },
            },

        };
    },