element-ui日期組件DatePicker設置日期選擇范圍Picker Options

element-UI提供了DatePicker日期選擇器組件,可以讓我們很方便的獲取到日期,默認的選擇是全部的日期都可以選擇的,但是很多場景中我們要對日期選擇范圍做限定,比如出行日期就不能選過去的日期,訂票時間要限制日期范圍

官網提供了picker-options參數可以設置日期選擇范圍,具體操作看代碼// 頁面引入組件, 加上picker-options這個參數

  <el-date-picker
    v-model="exCheckDate"
    type="date"
    :picker-options="pickerOptions"
    value-format="yyyy-MM-dd"
    placeholder="Please select">
  </el-date-picker>

  // js中定義范圍
  // picker-options的值是一個對象,他的disabledDate屬性可以設置禁用日期,有一個參數是當前選擇的日期
  data () {
    return {
      pickerOptions: {}, // 日期設置對象

 } }, created { // disabledDate 為true表示不可選,false表示可選
   this.pickerOptions.disabledDate = disabledDate (time) { // 設置可選擇的日期為今天之后的一個月內
      let curDate = (new Date()).getTime() // 這里算出一個月的毫秒數,這里使用30的平均值,實際中應根據具體的每個月有多少天計算
      let day = 30 * 24 * 3600 * 1000 let dateRegion = curDate + day return time.getTime() < Date.now() - 8.64e7 || time.getTime() > dateRegion // 設置選擇的日期小於當前的日期,小於返回true,日期不可選
      // return time.getTime() < Date.now() - 8.64e7
 }, }

 

 

看一下應用的效果, 可選范圍一個月,8是當前日期

  

 

可選范圍今天及之后的日期

  

 

方法補充說明: 上面的寫法是之前整理的,寫的比較隨意,在項目中這樣寫不太好,下面寫一個詳細版

// 頁面引入組件, 加上picker-options這個參數
  <el-date-picker
    v-model="exCheckDate"
    type="date"
    :picker-options="pickerOptions"
    value-format="yyyy-MM-dd"
    placeholder="Please select">
  </el-date-picker>

  // js中定義范圍
  // picker-options的值是一個對象,他的disabledDate屬性可以設置禁用日期
  data () {
    return {
      pickerOptions: {
        // disabledDate是一個函數,參數是當前選中的日期值,這個函數需要返回一個Boolean值,
        disabledDate: (time) => {
          // 如果函數處理比較簡單,可以直接在這里寫邏輯方法
          // return time.getTime() < Date.now() - 8.64e7

          // 如果函數里處理的數據比較麻煩,也可以單獨放在一個函數里,避免data數據太臃腫
          return this.dealDisabledDate(time)
        }
      }, // 日期設置對象
    }
  },

  created {
    
  },

  methods: {
    // 單獨處理時間的函數
    dealDisabledDate (time) {
      // time.getTime是把選中的時間轉化成自1970年1月1日 00:00:00 UTC到當前時間的毫秒數
      // Date.now()是把今天的時間轉化成自1970年1月1日 00:00:00 UTC到當前時間的毫秒數,這樣比較好比較
      // return的值,true是不可以操作選擇,false可以操作選擇,比如下面這個判斷就只能選擇今天之后的時間
      return time.getTime() < Date.now()

      // 這里減8.64e7的作用是,讓今天的日期可以選擇,如果不減的話,今天的日期就不可以選擇,判斷中寫<= 也是沒用的,一天的毫秒數就是8.64e7
      // return time.getTime() <= Date.now()
      // return time.getTime() < Date.now() - 8.64e7
    }
  }

                                        

 

這樣寫了,看着應該更清晰一些吧