<div class='startTime'> 開始時間:<el-date-picker v-model="value1" type="date" @change="changeStartTime" :clearable="false" placeholder="選擇日期" :picker-options="startDateLimit"> </el-date-picker> <span class="important">*</span> </div> <!-- 結束時間 --> <div class="endTime"> 結束時間:<el-date-picker v-model="value2" :picker-options="endDateLimit" type="date" :clearable="false" @change="changeEndTime" placeholder="選擇日期"> </el-date-picker> <span class="important">*</span> </div>
vm = new Vue({ el: "#app", data: function () { return { value1: "", //開始時間 value2: "", //結束時間 startDateLimit: { disabledDate: (time) => { // if (this.value2 != "") { // return time.getTime() > new Date(this.value2).getTime(); // }else{ return time.getTime() < Date.now() - 8.64e6;//禁用當前日期以前的時間;若是沒有後面的-8.64e6就是不能夠選擇今天的 // } } }, endDateLimit: { disabledDate: (time) => { if(this.value1!= ""){ return time.getTime() < new Date(this.value1).getTime()//禁用開始日期以前的日期 } return time.getTime() < Date.now() - 8.64e6;; //減去一天的時間表明能夠選擇同一天; } }, } },
更多使用方法連接以下:
https://blog.csdn.net/qq_33769914/article/details/83856268
https://www.cnblogs.com/YuKiee/p/9651240.htmlhtml