vue + element 日期選擇器(選擇日期范圍) 日期不可選范圍

Element 日期選擇器（選擇日期范圍）的組件長這樣色兒的

 

 

 

沒有其他需求的話直接懟  是沒有問題的。 一個開始時間；一個結束時間 用這個還是挺香的     主要還是 看需求吧  如果非要弄兩個時間選擇器 也行

 

主要是記錄 日期選擇器中 選擇日期范圍  這個玩意兒

日期選擇的需求 無非是 可選擇范圍問題
例1：只可以選擇當前日期  之前的日期范圍（包括今天 或者 不包括今天）

例2：只可以選擇當前日期 之后的日期范圍（包括今天 或者 不包括今天）

例3：固定一段日期范圍  （最近一個月，一周，三個月）

暫時我能想到的就這些個 需求

 

只可以選擇當前日期  之前的日期范圍（包括今天 或者 不包括今天）

// 我是用element 在線預覽編輯的  

//html部分
<div class="block">
    <span class="demonstration">默認</span>
    <el-date-picker
      v-model="value1"
      :picker-options="pickerOptions"
      type="daterange"
      range-separator="至"
      start-placeholder="開始日期"
      value-format="yyyy-MM-dd"              
      end-placeholder="結束日期">
    </el-date-picker>
    <div>{{value1}}</div>
  </div>

// vue data部分

data() {
      return {
        pickerOptions: { disabledDate(time){ return time.getTime() > Date.now()-8.64e7 } },
        value1: '',
      };
    }

// value-format 就是你v-model value1的值  如果你要yyyy-MM-dd格式就寫這個   要時間戳 就寫 timestamp

// 日期不可選主要是 pickerOptions 里的disabledDate函數 在作怪    
// 如果需要今天 不可選 那就 time.getTime() > Date.now() - 8.64e7    
// 如果需要今天 可選 那就 time.getTime() > Date.now()

 

只可以選擇當前日期 之后的日期范圍（包括今天 或者 不包括今天）

和上面代碼是一樣的 主要是將 pickerOptions 里的 disabledDate函數中的 return 判斷改一下

改為 小於 就行了噻  

今天不可選 time.getTime() > Date.now()

今天可選 time.getTime() > Date.now - 8.64e7