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