ElementUI日期選擇器時間選擇范圍限制的實現(xiàn)
ElementUI是餓了么推出的一套基于vue2.x的一個ui框架。官方文檔也很詳細(xì),這里做一個element-ui日期插件的補充。
官方文檔中使用picker-options屬性來限制可選擇的日期,這里舉例子稍做補充。
單個輸入框的
組件代碼:
<el-date-picker v-model="value1" type="date" placeholder="選擇日期" :picker-options="pickerOptions0"> </el-date-picker>
情景1: 設(shè)置選擇今天以及今天之后的日期
data (){ return { pickerOptions0: { disabledDate(time) { return time.getTime() < Date.now() - 8.64e7; } }, } }
情景2: 設(shè)置選擇今天以及今天以前的日期
data (){ return { pickerOptions0: { disabledDate(time) { return time.getTime() > Date.now() - 8.64e6 } }, } }
情景3: 設(shè)置選擇今天之后的日期(不能選擇當(dāng)天時間)
data (){ return { pickerOptions0: { disabledDate(time) { return time.getTime() < Date.now(); } }, } }
情景4: 設(shè)置選擇今天之前的日期(不能選擇當(dāng)天)
data (){ return { pickerOptions0: { disabledDate(time) { return time.getTime() > Date.now(); } }, } }
情景5: 設(shè)置選擇三個月之前到今天的日期
data (){ return { pickerOptions0: { disabledDate(time) { let curDate = (new Date()).getTime(); let three = 90 * 24 * 3600 * 1000; let threeMonths = curDate - three; return time.getTime() > Date.now() || time.getTime() < threeMonths;; } }, } }
兩個輸入框
組件代碼
<el-date-picker v-model="value1" type="date" placeholder="開始日期" :picker-options="pickerOptions0"> </el-date-picker> <el-date-picker v-model="value2" type="date" placeholder="結(jié)束日期" :picker-options="pickerOptions1"> </el-date-picker>
情景1: 限制結(jié)束日期不能大于開始日期
data(){ return { pickerOptions0: { disabledDate: (time) => { if (this.value2 != "") { return time.getTime() > Date.now() || time.getTime() > this.value2; } else { return time.getTime() > Date.now(); } } }, pickerOptions1: { disabledDate: (time) => { return time.getTime() < this.value1 || time.getTime() > Date.now(); } }, } }
針對選擇范圍(type="daterange")的日期篩選,類似于單個輸入框的情況,直接使用參數(shù)time進行判斷
到此這篇關(guān)于ElementUI日期選擇器時間選擇范圍限制的實現(xiàn)的文章就介紹到這了,更多相關(guān)Element日期選擇器范圍限制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vuex + keep-alive實現(xiàn)tab標(biāo)簽頁面緩存功能
這篇文章主要介紹了vuex + keep-alive實現(xiàn)tab標(biāo)簽頁面緩存功能,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10vue跳轉(zhuǎn)同一個組件,參數(shù)不同,頁面接收值只接收一次的解決方法
今天小編就為大家分享一篇vue跳轉(zhuǎn)同一個組件,參數(shù)不同,頁面接收值只接收一次的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11Vue項目配置、切換主題顏色詳細(xì)教程(mixin+scss方式,簡單高效)
這篇文章主要給大家介紹了關(guān)于Vue項目配置、切換主題顏色(mixin+scss方式)的相關(guān)資料,根據(jù)預(yù)設(shè)的配色方案,在前端實現(xiàn)動態(tài)切換系統(tǒng)主題顏色,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11對vue2.0中.vue文件頁面跳轉(zhuǎn)之.$router.push的用法詳解
今天小編就為大家分享一篇對vue2.0中.vue文件頁面跳轉(zhuǎn)之.$router.push的用法詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08vue.js this.$router.push獲取不到params參數(shù)問題
這篇文章主要介紹了vue.js this.$router.push獲取不到params參數(shù)問題,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03