Element-UI餓了麼時間元件控制元件按月份週日期，開始時間結束時間範圍限制引數
阿新 • • 發佈：2020-03-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
授人以魚不如授人以漁，希望大家可以更好地去理解，這個日期控制元件限制方法的使用，而不是一味地去複製相關的程式碼，短時間內複製可能更快，但是想要提高自己就要不斷地去理解每一個引數的設計、用法、理念。