ElementUI 日期選擇器 datepicker 選擇範圍限制

　　在使用elementUI中日期選擇器時，常常會遇到這樣的需求——對可選擇的時間範圍有必定限制，好比我遇到的就是：只能選擇今天之前的一年之內的日期。

　　查閱官方文檔，咱們發現它介紹的並不詳細，下面咱們就來詳細介紹一下：

 

　1.給 el-date-picker 組件添加 picker-options 屬性，並綁定對應數據 pickerOptions

　　

 

　2. 對綁定的數據值進行限制

　  2.1 單個選擇框的限制

　　　　2.1.1 設置選擇今天及最近一年內的日期（包括今天）

data(){
    return {
        pickerOptions: {
            disabledDate(time) {
                let curDate = (new Date()).toString() // 當前時間戳轉爲字符串
                let curDateYear = (new Date()).getFullYear() // 當前時間的年份
                let oneYearAgoDate = curDate.replace(curDateYear,curDateYear-1)// 字符串年份替換爲一年前
                let oneYear = new Date(oneYearAgoDate).getTime() //一年前字符串轉爲時間戳
                return time.getTime() > Date.now() || time.getTime() < oneYear;
            }
        }
    }  
}

　　　　2.1.2  設置選擇今天及今天之後的日期

data (){
    return {
        pickerOptions0: {
            disabledDate(time) {
                return time.getTime() < Date.now() - 8.64e7;
            }
        }
    }    
}

　　　　2.1.3 設置選擇今天及今天之前的日期

data (){
    return {
        pickerOptions0: {
            disabledDate(time) {
                return time.getTime() > Date.now() - 8.64e6
            }
        }
    }    
}

　　　　2.1.4 設置選擇今天以後的日期（不能選擇當天時間）

data (){
    return {
        pickerOptions0: {
            disabledDate(time) {
                return time.getTime() < Date.now();
            }
        }
    }     
}

　　　　2.1.5 設置選擇今天以前的日期（不能選擇當天）

data (){
    return {
        pickerOptions0: {
            disabledDate(time) {
                return time.getTime() > Date.now();
            }
        }
    }     
}

　　　　2.1.6 設置選擇三個月以前到今天的日期

data (){
    return {
        pickerOptions0: {
            disabledDate(time) {
                let curDate = (new Date()).getTime();
                let three = 90 * 24 * 3600 * 1000;
                let threeMonths = curDate - three;
                return time.getTime() > Date.now() || time.getTime() < threeMonths;;
            }
        }
    }    
}

　　　2.2 兩個輸入框的限制

　　

　　　　　　設置開始時間不能大於結束時間（且只能選擇當前時間之前的日期）

data(){
    return {
        pickerOptions0: {
            disabledDate: (time) => {
                if (this.value2) {
                    return time.getTime() > Date.now() || time.getTime() > this.value2;
                } else {
                    return time.getTime() > Date.now();
                }
            }
        },
        pickerOptions1: {
            disabledDate: (time) => {
                return time.getTime() < this.value1 || time.getTime() > Date.now();
            }
        }
    }     
}

　　　　　　設置開始時間不能大於結束時間（能選擇全部日期）

data(){
    return {
        pickerOptions0: {
            disabledDate: (time) => {
                if (this.value2) {
                   return time.getTime() > this.searchForm.endTime
                }
            }
        },
        pickerOptions1: {
            disabledDate: (time) => {
                return time.getTime() < this.searchForm.startTime
            }
        }
    }     
}