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.64e7;//禁用當前日期之前的時間;如果沒有后面的-8.64e6就是不可以選擇今天的
          // }
        }
      },
      endDateLimit: {
        disabledDate: (time) => {
          if(this.value1!= ""){
            return time.getTime() < new Date(this.value1).getTime()//禁用開始日期之前的日期
          }
          return time.getTime() < Date.now() - 8.64e7;; //減去一天的時間代表可以選擇同一天;
        }
      },
    }
  },


更多使用方法鏈接如下:
https://blog.csdn.net/qq_33769914/article/details/83856268
https://www.cnblogs.com/YuKiee/p/9651240.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM