Customize the shortcut options in El date picker, and dynamically set the disabled date

1. demand

stay table In the table , Back end returned List, Every one of them list There is an occurrence date in the data occur_time, Click report delay to open the history dialog box , Click to open a dialog box for filling in information after applying for extension . The user can only select the current plan completion date list The date of occurrence plus 30 Days after , So it's in picker-options Set in disabledDate.

2. Implementation code

<el-date-picker
   v-model="delayItem.plan_date"
   align="right"
   type="date"
   format="yyyy-MM-dd"
   value-format="yyyy-MM-dd"
   placeholder=" Please select the planned completion date "
   :picker-options="pickerOptions"
>
</el-date-picker>

Because the back end returns analysis_occure_time The time format is 2021/12/20, So use replaceAll（） convert to 2022-12-20.

new Date（ ） The returned data is in Chinese standard format

Use setDate（） Directly calculate the departure birthday plus 30 Days after , If you need to calculate the number of days before a certain date, you can directly subtract the number of days

data(){
  return{
    delayItem:{},
    pickerOptions: {}
  }
},
methods:{ 
   // Apply for extension button click event , Open the dialog box for filling in extension application information  
   openDelay(row) {
     this.pickerOptions = {};
     this.delayReport = row;
     this.delayDialogFormVisible = true;
     // Calculate the date   analysis_occure_time The format is 2021/12/20  It needs to be converted into  2021-12-20
     let occure_time = this.delayReport.analysis_occure_time.replaceAll('/', '-');
     let dateDis = new Date(occure_time);//new Date（） Returns the Chinese standard time format 
     dateDis.setDate(dateDis.getDate() + 30); // Planned date plus 30 God 
     this.pickerOptions = {
        disabledDate(time) {
          return time.getTime() < new Date(dateDis).getTime();
        },
      }
   },
}

 disabledDate(time){  } Set the disable date in ,time.getTime The time format of is a timestamp , Therefore, the disabled date format should also be set through new Date( dateDis).getTime() Convert to timestamp format , Make sure that the two time formats are consistent .