elementUI 日期時間選擇器el-date-picker開始時間與結束時間的約束條件
阿新 • • 發佈:2021-10-09
主要通過新增: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) { //如果開始時間不為空,則結束時間大於開始時間 returnnew 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>