使用element ui的datePicker组件小记
又开始接触vue的后台管理系统啦,结合饿了么开源ui库开发项目。相信小伙伴们都很熟悉这对cp组合。Today,记录一下最近针对于datePicker的使用场景,希望能帮助到遇到这些方面问题的小伙伴们~~
1.当前选择时间不能小于当天日期
比如今天是2020/4/27,当创建一条任务时,开始时间只能选择当天或者当天之后的日期:
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
}
2.结束时间不能大于开始时间
当创建一条任务时,开始时间选择了当天2020/4/27,结束时间可以是当天或者当天之后的时间:
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
}
3.结束时间大于开始时间
开始时间选择了当天2020/4/27,结束时间不可以选择2020/4/27之前的日期
首先获取 开始时间的值,再进行限制
let startTimes = new Date(this.ruleForm.startTime).getTime();
this.pickerEndOptions = {
disabledDate(time) {
return time.getTime() < startTimes;
}
};
4.不能创建同一时间任务
创建第一条任务时,开始时间和结束时间按照前三条的规则选择之后,保存提交一条数据。再创建第二条任务时,开始时间是以上一条的结束时间为开始时间,不可以选择之前的日期。
tips:这块的需求如上所述,另外,如果新增第一条任务,后台会记录当前这条数据的结束时间。返回字段lastTaskEndTime,当新增第二条数据时,开始时间与返回的字段状态做判断,如果上次结束是2020/4/29,此时的lastTaskEndTime为2020/4/29,那么第二条新增任务的开始时间只能 选择2020/4/29开始或者之后的日期。
bindStartDate(date) {
let start_time = new Date(this.lastTaskEndTime).getTime();
this.pickerStartOptions = {
disabledDate(time) {
return time.getTime() < start_time;
}
};
}
bindEndDate(date) {
let startTimes = new Date(this.ruleForm.startTime).getTime();
this.pickerEndOptions = {
disabledDate(time) {
return time.getTime() < startTimes;
}
};
}