使用Vue+element-ui日期时间选择器el-date-picker使开始时间小于结束时间
需求:(有效期)开始时间要小于结束时间思路:使用el-date-picker组件的:picker-options属性,对组件进行约束。结束时间存在时,开始时间的组件框里不能选择大于结束时间的值;开始时间存在时,结束时间不能选择小于开始时间的值。实现::picker-options="startDatePicker":picker-options="endDateP...
·
需求:(有效期)开始时间要小于结束时间
思路:使用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()
}
}
}
},
效果:
- 重新选结束时间时,开始时间前的时间点击失效。
完成了。
更多推荐
已为社区贡献3条内容
所有评论(0)