elementUI 日期時間選擇器el-date-picker開始時間與結束時間約束

主要思路：
el-date-picker組件須要 :picker-options屬性，屬性值爲data,data的數據來自於methods中的方法。

##template代碼

<el-form-item label="開始時間" prop="startTime" >
  <el-date-picker v-model="form.startTime"  format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" clearable style="width: 100%"
                  :picker-options="startDatePicker" :disabled="dialogStatus=='view'" type="datetime"  :placeholder="dialogStatus=='view'?'':'請輸入訂閱開始時間'"></el-date-picker>
</el-form-item>
<el-form-item label="結束時間" prop="endTime">
  <el-date-picker v-model="form.endTime"  format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" clearable style="width: 100%"
                  :picker-options="endDatePicker"  :disabled="dialogStatus=='view'" type="datetime"  :placeholder="dialogStatus=='view'?'':'請輸入訂閱結束時間'"></el-date-picker>
</el-form-item>

##data數據

data() {
  return {
    startDatePicker: this.beginDate(),
    endDatePicker: this.processDate(),
　　}
}

##methods方法

beginDate(){
  const self = this
  return {
    disabledDate(time){
      if (self.form.endTime) {  //若是結束時間不爲空，則小於結束時間
        return new Date(self.form.endTime).getTime() < time.getTime()
      } else {
        // return time.getTime() > Date.now()//開始時間不選時，結束時間最大值小於等於當天
      }
    }
  }
},
processDate() {
  const  self = this
  return {
    disabledDate(time) {
      if (self.form.startTime) {  //若是開始時間不爲空，則結束時間大於開始時間
        return new Date(self.form.startTime).getTime() > time.getTime()
      } else {
        // return time.getTime() > Date.now()//開始時間不選時，結束時間最大值小於等於當天
      }
    }
  }
}

附加：
只能夠選擇今天以及今天之後的時間：

pickerOptions0: {
  disabledDate(time) {
    return time.getTime() < Date.now() - 8.64e7;//8.64e7=1000*60*60*24一天
  }
},

 

# 說明。添加多個時間限制，使用||而不是&&，由於這裏返回的是disabledDate

processDate() {  const  self = this  return {    disabledDate(time) {      if (self.form.beginTime) {  //若是開始時間不爲空，則結束時間大於開始時間,且大於當前時間        return new Date(self.form.beginTime).getTime() > time.getTime() || time.getTime() < Date.now() - 1000*3600*24      } else {        return time.getTime() < Date.now() - 1000*3600*24//開始時間不選時，結束時間最大值大於等於當天      }    }  }},