问题（04）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()
         );
      },
   };
},

实现效果