使用Vue+element-ui日期時間選擇器el-date-picker使開始時間小於結束時間

需求：（有效期）開始時間要小於結束時間

 

思路：使用el-date-picker組件的:picker-options屬性，對組件進行約束。結束時間存在時，開始時間的組件框裏不能選擇大於結束時間的值；開始時間存在時，結束時間不能選擇小於開始時間的值。

實現：

:picker-options="startDatePicker"

:picker-options="endDatePicker"

• 紅色框：是要添加的屬性
• 橙色框：需要留意的

startDatePicker: null,
endDatePicker: null,

 this.startDatePicker = this.beginDate();
 this.endDatePicker = this.processDate();

 beginDate() {
            const self = this
            return {
                disabledDate(time){
                    if (self.informationVehicle.licenseEndTime) {
                        return new Date(self.informationVehicle.licenseEndTime).getTime() < time.getTime()
                    }
                }
            }
        },
        processDate() {
            const  self = this
            return {
                disabledDate(time) {
                    if (self.informationVehicle.licenseStartTime) {
                        return new Date(self.informationVehicle.licenseStartTime).getTime() > time.getTime()
                    }
                }
            }
        },

效果：

• 重新選結束時間時，開始時間前的時間點擊失效。

完成了。