Element-ui Date Component DatePicker Set Date selection range picker options

Element-ui provides the DatePicker date selector component, which allows us to easily get to the date, the default selection is all the date can be selected, but in many scenarios we have to limit the date selection, such as travel date can not choose the past date, Limit date range for booking time

The official website provides the picker-options parameter can set the date selection range, the concrete operation looks the code

//page Introduction component, plus picker-options this parameter<el-date-Picker v-model= "Excheckdate"type= "Date":p Icker-options= "Pickeroptions"value-format= "Yyyy-mm-dd"placeholder= "Please select" > </el-date-picker>//the scope defined in JS  //the value of Picker-options is an object whose Disableddate property can be set to a disabled date, with one parameter being the currently selected datedata () {return{pickeroptions: {},//Date Setting Object}}, created {
    ///Disableddate to TRUE indicates not selectable, false indicates   optional This. pickeroptions.disableddate =Disableddate (time) {//set the selectable date to be within one months after todayLet Curdate = (NewDate ()). GetTime ()//This calculates the number of milliseconds in one months, where the average of 30 is used, and the actual number of days per monthLet day = 30 * 24 * 3600 * 1000Let dateregion= Curdate + DayreturnTime.gettime () < Date.now ()-8.64e7 | | Time.gettime () >dateregion//sets the selected date to be less than the current date, less than the return true, and the date is not selectable      //return Time.gettime () < Date.now ()-8.64e7    },  }

Take a look at the effect of the application, optional range one months, 8 is the current date

Optional range today and after the date

If you need other effects you can set your own

Element-ui Date Component DatePicker Set Date selection range picker options