Element-UI餓了么時間組件控件按月份周日期，開始時間結束時間範圍限制參數

2020 年 3 月 11 日
筆記

在日常開發中，我們會遇到一些情況，在使用Element-UI 限制用戶的日期時間範圍的選擇控制（例如：查詢消息開始和結束時間，需要限制不能選擇今天之後的時間）。

看了網上的一些文檔，零零散散、各式各樣的都是簡單的吧代碼列出來，並沒有詳細的說明各參數的含義，用途，對新手及其不友好。

我們這裡使用的是 DatePicker 日期選擇器: Element官網日期控件地址，新手對於日期使用限制時間，可能不太理解寫限制規則的方式。接下來我們將詳細的解讀日期限制的參數設置。全方位的透徹理解怎麼限制日期控件的時間。

官方文檔日期限制說明：

先看餓了么這裡的官方文檔，這裡寫的很簡潔，使用 disabledDate 參數來限制， disabledDate 是一個函數，函數內有一個形參，以下是簡單偽代碼示例

// HTML  首先在日期選擇器加上:picker-options屬性  // 例如：    <el-date-picker      v-model="endDate"      :picker-options="disabledDate"  >  </el-date-picker>      // Vue 中 data裏面寫入相關參數   disabledDate: (time) => {
      return time.getTime() < new Date().getTime() 

　　// 此處 time 的形參，time默代表選擇器的每一個當前時間，用於判斷這些時間是否可選.
　　// 通過 return time > 某個時間 或者 return time  < 某個時間來限制時間的選擇範圍.
　　// 記得時間需要使用 .getTime() 轉換成 毫秒.  })

以上是個簡單的示例，相信仔細閱讀後的同學，現在一定已經了解時間限制的方法，很簡單其實就是通過設置 disabledDate 的形參 time, return 出一個大於或者小於的公式，即可來設置日期的使用範圍。

接下來，我們使用兩個詳細的案列來更清晰解讀一下，日期控件的使用方法、

兩個日期聯動控制（限制開始和結束時間為最近一個月）

其實思路很簡單，開始時間顯示當前時間為最大，結束時間通過拿到開始時間的數據，限制最大為開始時間或者當前時間即可；下面詳細代碼解讀；

Tip: 日期控件需要的參數是 “2020-12-31”這種格式，但是在限制時間的函數使用 “<”、“>”、”>=”、“<=”，這些比較方法是，需要使用.getTime()轉化成毫秒，否則“2020-12-31”這種格式是無法對比的哦~

// HTML 代碼    <el-date-picker     v-model="value1"     placeholder="開始時間"     :picker-options="start">  </el-date-picker>  <el-date-picker     v-model="value2"     placeholder="結束時間"     :picker-options="end">  </el-date-picker>        // Vue 中 data 中代碼      value1: '2020-12-31',      value2: '2020-12-31',      start: {         disabledDate: (time) => {           // 此處為30天時間的毫秒數           const space = 30 * 24 * 3600 * 1000           // 設置最小時間毫秒數，當前時間減去30天的毫秒數           const minTime = new Date().getTime() - space           // 設置最大時間毫秒數，當前時間加上今天天的毫秒數           const maxTime = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1)           // return 一個公式 最大為當前時間，最小為30天前           return time.getTime() < minTime || time.getTime() > maxTime         }      },      end: {        disabledDate: (time) => {          // 此處為30天時間的毫秒數          const space = 30 * 24 * 3600 * 1000          // 拿到開始時間的日期          const  startTime = value1          // 設置當前選擇時間          const startTimes = startTime || new Date().getTime() - space          // 設置最小選擇時間，dateRange為當前時間需要手動方法獲取當前時間，下方代碼有展示獲取當前時間的方式          const minTime = (startTimes === dateRange) ? new Date(startTimes).getTime() : new Date(startTimes).getTime() - (1 * 24 * 3600 * 1000)          // 設置最大選擇時間為今天          const maxTime = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1)          // 這裡依舊是return 一個公式 最大為今天或者開始框中選擇的時間，最小為30天前          return time.getTime() < minTime || time.getTime() > maxTime        }      },  
  // 獲取當前時間的函數寫法     var dd = new Date()   dd.setDate(dd.getDate() + addDate) // 獲取第addDate天后的日期   var y = dd.getFullYear()   var m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 獲取當前月份的日期，不足10補0   var d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate()   // 獲取當前幾號，不足10補0   let dateRange = y + '-' + m + '-' + d

　授人以魚不如授人以漁，希望大家可以更好地去理解，這個日期控件限制方法的使用，而不是一味地去複製相關的代碼，短時間內複製可能更快，但是想要提高自己就要不斷地去理解每一個參數的設計、用法、理念。