ElementUI date picker limits the choice datepicker

　　When using elementUI the date picker, often encounter such a demand - there is a limit to the selectable time range, for example, I encountered is: You can only select dates within one year ago today.

　　Check out the official documentation, we find it is not described in detail, here we explain in detail:

 

　1. el-date-picker to add components picker-options attribute and associate data pickerOptions

　　

 

　2. Data binding limit values

　  2.1 restriction single select box

　　　　2.1.1 Select and set the date (including today) in the most recent year today

Data () { 
    return { 
        pickerOptions: { 
            disabledDate (Time) { 
                . = CurDate the let (new new a Date ()) toString () // current time stamp to a string 
                let curDateYear = (new Date () ) getFullYear () /. Year / current time 
                let oneYearAgoDate = curDate.replace (curDateYear, curDateYear -1) // string replace a year ago 
                let oneYear = new Date (oneYearAgoDate) .getTime () // string to a historical time stamp 
                return time.getTime ()> Date.now () || time.getTime () <oneYear; 
            } 
        } 
    }   
}    

　　　　2.1.2 Set selection later today and today's date

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

　　　　2.1.3 Settings Select the previous day and today's date

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

　　　　2.1.4  Set Select dates after today (can not choose the time of day)

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

　　　　2.1.5  Set Select dates before today (can not choose the same day)

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

　　　　2.1.6  Before setting choose from three months to today's date

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 limitations of two input boxes

　　

　　　　　　Set the start time can not be greater than the end time

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();
            }
        }
    }     
}