1. 程式人生 > 其它 >elementUI 日期時間選擇器el-date-picker開始時間與結束時間的約束條件

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

主要通過新增:picker-options來約束時間的

開始時間必須大於當前時間,結束時間必須大於開始時間來加判斷

method 裡面新增
  beginDate() {
        const self = this;
        return {
          disabledDate(time) {
            debugger
            if (endTime) {
              //如果結束時間不為空,則小於結束時間
              return new Date(endTime).getTime() < time.getTime();
            } 
else { // return time.getTime() > Date.now()//開始時間不選時,結束時間最大值小於等於當天 } }, }; }, processDate() { const self = this; return { disabledDate(time) { if (startTime) { //如果開始時間不為空,則結束時間大於開始時間 return
new Date(startTime).getTime() > time.getTime(); } else { // return time.getTime() > Date.now()//開始時間不選時,結束時間最大值小於等於當天 } }, }; },

data

startDatePicker: this.beginDate(),
endDatePicker: this.processDate(),
 <div class="des-status-df
">開始</div> <div class="block"> <el-date-picker :picker-options="startDatePicker" v-model="startTime" type="datetime" placeholder="選擇日期時間" > </el-date-picker> </div> <div class="des-status-df">結束</div> <div class="block"> <el-date-picker :picker-options="endDatePicker" v-model="endTime" type="datetime" placeholder="選擇日期時間" > </el-date-picker> </div>