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

在平常開發中，咱們會遇到一些狀況，在使用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

　

　授人以魚不如授人以漁，但願你們能夠更好地去理解，這個日期控件限制方法的使用，而不是一味地去複製相關的代碼，短期內複製可能更快，可是想要提升本身就要不斷地去理解每個參數的設計、用法、理念。

 

　若是你們有任何疑問便可留言反饋，會在第一時間回覆反饋，謝謝你們！

　本文爲Tz張無忌原創文章，讀後有收穫能夠右側邊欄請做者喝咖啡，轉載請文章註明出處：https://www.cnblogs.com/zhaohongcheng/