elementui限制開始日期和結束日期

<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

相關文章
相關標籤/搜索