Question 4 - datepicker date selector, disabling two date selectors (start and end dates)

Business scenario ：

according to 2 Date （ Start date 、 End date ） Query data , however The end date must be greater than or equal to the start date .

---

Problem description

Select after start date , The end date range must be greater than the start date ; Select after end date , The start date must be less than the end date .

---

Solution ：

Use disabledDate To set the disabled status .

Specific code

The first 1 Step , Add attribute ,:picker-options="startDatePicker",:picker-options="endDatePicker"

			<el-form-item label=" Start date " prop="startDate">
                    <el-date-picker v-model="form.startDate" type="date" value-format="yyyy-MM-dd HH:mm:ss" size="small" clearable placeholder=" Choose a start date " :picker-options="startDatePicker" >
                    </el-date-picker>
                     to 
                    <el-date-picker v-model="form.endDate" type="date" value-format="yyyy-MM-dd 23:59:59" size="small" clearable placeholder=" Select end date " :picker-options="endDatePicker" >
                    </el-date-picker>
			</el-form-item>

The first 2 Step , In components data register ,startDatePicker、endDatePicker

return {
    
     form: {
    
       startDate: null,
       endDate: null,
    },
   startDatePicker: this.beginDate(),
   endDatePicker: this.processDate(),
};

The first 3 Step , Define method logic ,beginDate、processDate.

beginDate() {
    
   let self = this;
   return {
    
      disabledDate(time) {
    
         if (self.form.endDate) {
    
            //  Disable if the date value is greater than the end date 
            return time.getTime() > new Date(self.form.endDate);
          }
     },
 };
},

//  The end date must be greater than or equal to the start date 
processDate() {
    
   let self = this;
    return {
    
      disabledDate(time) {
    
         //  Disable if the date value is less than the start date 
         return (
            new Date(self.form.startDate).getTime() > time.getTime()
         );
      },
   };
},

Realization effect