问题4 — DatePicker日期选择器，2个日期选择器（开始、结束日期）的禁用

业务场景：

根据2个日期（开始日期、结束日期）查询数据，但是结束日期必须大于等于开始日期。

---

问题描述

选择开始日期之后，结束日期的范围必须大于开始日期；选择结束日期之后，开始日期必须小于结束日期。

---

解决方案：

使用disabledDate来设置禁用状态。

具体代码

第1步，添加属性，:picker-options="startDatePicker"，:picker-options="endDatePicker"

			<el-form-item label="开始日期" prop="startDate">
                    <el-date-picker v-model="form.startDate" type="date" value-format="yyyy-MM-dd HH:mm:ss" size="small" clearable placeholder="选择开始日期" :picker-options="startDatePicker" >
                    </el-date-picker>
                    至
                    <el-date-picker v-model="form.endDate" type="date" value-format="yyyy-MM-dd 23:59:59" size="small" clearable placeholder="选择结束日期" :picker-options="endDatePicker" >
                    </el-date-picker>
			</el-form-item>

第2步，在组件data注册，startDatePicker、endDatePicker

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

第3步，定义方法逻辑，beginDate、processDate。

beginDate() {
    
   let self = this;
   return {
    
      disabledDate(time) {
    
         if (self.form.endDate) {
    
            // 将日期值大于结束日期的禁用
            return time.getTime() > new Date(self.form.endDate);
          }
     },
 };
},

// 结束日期必须大于等于开始日期
processDate() {
    
   let self = this;
    return {
    
      disabledDate(time) {
    
         // 将日期值小于开始日期的禁用
         return (
            new Date(self.form.startDate).getTime() > time.getTime()
         );
      },
   };
},

实现效果