vue~datepicker组件使用

使用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;
            }
       };
 }