詳解element-ui動態(tài)限定的日期范圍選擇器代碼片段
更新時間：2020年07月03日 08:39:44 作者：大暗扣
這篇文章主要介紹了element-ui動態(tài)限定的日期范圍選擇器代碼片段，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
何開此題
我是一個碼農(nóng)，緣起就是這次需求遇到了之前實現(xiàn)過的功能細節(jié)，不想再從頭翻組件文檔實現(xiàn)一遍，最好是直接拷貝粘貼。
細節(jié)
picker-options 設定規(guī)則：時間范圍最大可選擇30天, 最晚時間為今天。
element-ui 的日期選擇器的組件是 el-date-picker.
設定 pickerOptions2，
data() {
return {
pickerOptions2: {
disabledDate: theDate => {
const oneDay = 3600 * 1000 * 24
const current = theDate.getTime()
const now = Date.now()
const condition1 = current > now
if (!this.minDateTimestamp) return condition1
const pickerRangeNum = 30
// 時間范圍最大可選擇30天,最晚時間為今天
const lastMonthBegin = this.minDateTimestamp
const lastMonthEnd = lastMonthBegin + pickerRangeNum * oneDay
return (
condition1 || current < lastMonthBegin || current > lastMonthEnd
)
},
onPick: ({ maxDate, minDate }) => {
this.minDateTimestamp = minDate.getTime()
if (maxDate) {
this.minDateTimestamp = 0
}
},
},
}
},
模板的設定，
<template> <el-date-picker class="form-item-control" v-model="qo2.dateRange2" type="daterange" range-separator=" 至 " start-placeholder="開始日期" end-placeholder="結(jié)束日期" placeholder="請選擇時間段" :picker-options="pickerOptions2" /> </template>
總結(jié)
element-ui 動態(tài)限定的日期范圍選擇器，再回首，不用愁。
到此這篇關于element-ui動態(tài)限定的日期范圍選擇器代碼片段的文章就介紹到這了,更多相關element-ui動態(tài)限定的日期范圍選擇器代碼片段內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
假設?App?的用戶可以在短時間內(nèi)進行多個?API?調(diào)用,但您只想顯示上次調(diào)用的結(jié)果,之前正在進行的請求變得無關緊要,在這種情況下,您可以利用?Axios?攔截器,本文給大家介紹了如何使用Axios攔截器中止Vue請求,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vuex中store的action和mutations用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
今天小編就為大家分享一篇Vue點擊切換顏色的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了Vue3中jsoneditor的使用相關知識,文中的示例代碼講解詳細,具有一定的學習價值,感興趣的小伙伴可以跟隨小編一起了解下2024-01-01
自定義指令，其實就是在vue提供的鉤子中寫代碼，這篇文章將從源碼的角度，帶大家深入了解一下Vue2種自定義指令的實現(xiàn)與使用，需要的可以參考一下2023-05-05
這篇文章主要為大家詳細介紹了Vue.js自定義指令的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
本篇文章給大家詳細分享了Vue Elememt-UI構(gòu)建管理后臺的過程以及相關代碼實例，一起參考學習下。2018-02-02
這篇文章主要給大家介紹了關于如何利用Vue實現(xiàn)簡易播放器的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
Vue axios 將傳遞的json數(shù)據(jù)轉(zhuǎn)為form data的例子
今天小編就為大家分享一篇Vue axios 將傳遞的json數(shù)據(jù)轉(zhuǎn)為form data的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了vite項目如何從0開始配置eslint問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03