vue中 element 中el-date-picker時間限制詳解

el-date-picker 在搜索頁面中一般不限制開始時間和結束時間，但是在選擇開始時間后選擇的結束時間不能大於開始時間。要求就是開始時間決定結束時間，結束時間限制開始時間。

<el-form-item label="開始時間">
                    <el-date-picker
                            v-model="form.startTime"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="選擇日期時間"
                            :picker-options="searchPickerOptionsStart"
                            @change="searchChangeEnd"
                    >
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="結束時間" >
                    <el-date-picker
                            v-model="form.endTime"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="選擇日期時間"
                            :picker-options="searchPickerOptionsEnd"
                            @change="searchChangeStart"
                    >
                    </el-date-picker>
                </el-form-item>

在綁定@change時候時間不要帶括號，不然無法獲取當前選擇之后的值，:picker-options是綁定的時間規則，開始默認不做限制

注意：在return time.getTime()>new Date(this.form.endTime).getTime() ;中>是代表當前時間小於等於結束時間可選，如果是>=是代表當前時間小於結束時間可選，當天時間不可點擊。》

 searchPickerOptionsStart:{},
 searchPickerOptionsEnd:{},

//搜索的結束時間限制開始時間,初始化時間都不限制
searchChangeStart(value) {
    if(!value){//為了解決點擊輸入框內的×之后時間限制沒有變化，不能自由選擇，這里利用設置了2999年之后都可選
        // 可通過箭頭函數的方式訪問到this
        this.searchPickerOptionsStart = Object.assign({}, this.searchPickerOptionsStart, {
            // 可通過箭頭函數的方式訪問到this
            disabledDate: (time) => {
                return time.getTime()>=new Date('2999-12-30 23:59:59').getTime()  ;
            }
        })
        return;
    }
    this.searchPickerOptionsStart = Object.assign({}, this.searchPickerOptionsStart, {
        // 可通過箭頭函數的方式訪問到this
        disabledDate: (time) => {
            return time.getTime()>new Date(value).getTime()  ;
        }
    })
},
//開始時間 控制結束時間
searchChangeEnd() {
    // console.log(new Date(this.addFormList[0].startTime).getTime());
    this.searchPickerOptionsEnd = Object.assign({}, this.searchPickerOptionsEnd, {
        disabledDate: (time) => {
            return time.getTime()<new Date(this.form.startTime).getTime();
        }
    })
},

在添加的時候開始時間和結束時間不能小於今天，但是可以選今天的日期，不同的時間段，開始時間小於結束時間，但是可以選擇和結束時間當天一樣的日期不同的時間段。這里開始時間和結束時間相互約制，但都可以選擇同一天。

這里的time.getTime()<Date.now()+8.64e7就是說可以讓選擇時間往后推一天，可以選擇當天的日期。如果往前推一天就是-8.64e7。

 //添加結束時間限制開始時間 初始化都不能選今天以前的時間
            addChangeStart(value){
                if(!value){
                    this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
                        disabledDate: (time)=>{
                            return time.getTime() <Date.now()-8.64e7//選當前時間之后的時間
                        }
                    })
                    return;
                }

                this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
                    // 可通過箭頭函數的方式訪問到this
                    disabledDate: (time) => {
                        return time.getTime()>new Date(value).getTime()|| time.getTime()<Date.now()-8.64e7 ;
                    }
                })
            },
            //開始時間 控制結束時間
            addChangeEnd(value) {
                this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
                    disabledDate: (time) => {
                        return time.getTime()<new Date(value).getTime() || time.getTime()<Date.now()-8.64e7;
                    }
                })
            },

還有一種情況就是實現在開始時間選擇同一天的后半天時間段之后，結束時間就會不能選和開始時間同一天，反之則可以，解決這種方法就是讓結束時間往前推一天-8.64e7

 //搜索的結束時間限制開始時間
            searchChangeStart(value) {
                if(!value){
                    // 可通過箭頭函數的方式訪問到this
                    this.searchPickerOptionsStart1 = Object.assign({}, this.searchPickerOptionsStart1, {
                        // 可通過箭頭函數的方式訪問到this
                        disabledDate: (time) => {
                            return time.getTime()>=new Date('2999-12-30 23:59:59').getTime()  ;
                        }
                    })
                    return;
                }
                this.searchPickerOptionsStart = Object.assign({}, this.searchPickerOptionsStart, {
                    // 可通過箭頭函數的方式訪問到this
                    disabledDate: (time) => {
                        return time.getTime()>new Date(value).getTime()  ;
                    }
                })
            },
            //開始時間 控制結束時間
            searchChangeEnd(timeVal) {
                // console.log(new Date(this.addFormList[0].startTime).getTime());
                this.searchPickerOptionsEnd = Object.assign({}, this.searchPickerOptionsEnd, {
                    disabledDate: (time) => {
                        return time.getTime()<new Date(timeVal).getTime()-8.64e7;
                    }
                })
            },

注意：插件在同一天內沒有限制結束時間段(hh:mm:ss)不能大於開始時間段(hh:mm:ss),所以在這里我自己寫了一個判斷限制。如果開始時間大於結束時間的話那就返回false,否則返回true。

// 控制時分秒比較大小
function timeComparison(startTime,endTime){
    if(new Date(startTime).getTime()>=new Date(endTime).getTime()){
        return false;
    }else{
        return true;
    }
}

 最后還有一種就是element的時間連選狀態

 <el-form-item label="上傳時間">
                    <div class="block">
                        <el-date-picker
                                v-model="form.upTime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                type="datetimerange"
                                align="right"
                                unlink-panels
                                range-separator="至"
                                start-placeholder="開始日期"
                                end-placeholder="結束日期"
                                :picker-options="pickerOptions">
                        </el-date-picker>
                    </div>
                </el-form-item>

 pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一個月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三個月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },

v-model="form.upTime"，代表綁定的值選擇之后form.upTime是一個數組，數組中的form.upTime[0]和form.upTime[1]分別是代表開始時間和結束時間。但是當你清空之后這個數組就不存在了，而不是為空數組。

 

如下圖中點擊×之后輸入框中的日期就會清空但是保留的日期