element-ui 限制日期選擇的方法(datepicker)
Element-UI是餓了么前端團(tuán)隊(duì)推出的一款基于Vue.js 2.0 的桌面端UI框架,手機(jī)端有對應(yīng)框架是 Mint UI 。
需求場景如下:
- 指定起止日期,后選的將會受到先選的限制
- 不同的日期選擇器,不過也存在關(guān)聯(lián)關(guān)系
實(shí)現(xiàn)方法不難,利用了 change 事件,動態(tài)改變 picker-options 中的 disableDate 即可。
Template
<script src="http://unpkg.com/vue/dist/vue.js"></script> <script src="http://unpkg.com/element-ui@2.3.8/lib/index.js"></script> <div id="app"> <template> <div class="block"> <span class="demonstration">起始日期</span> <el-date-picker v-model="startDate" type="date" placeholder="選擇日期" :picker-options="pickerOptionsStart" @change="changeEnd"> </el-date-picker> </div> <div class="block"> <span class="demonstration">截止日期</span> <el-date-picker v-model="endDate" type="date" placeholder="選擇日期" :picker-options="pickerOptionsEnd" @change="changeStart"> </el-date-picker> </div> </template> </div>
Script
var Main = { data() { return { pickerOptionsStart: {}, pickerOptionsEnd:{}, startDate: '', endDate: '', }; }, methods:{ changeStart (){ this.pickerOptionsStart = Object.assign({},this.pickerOptionsStart,{ disabledDate: (time) => { return time.getTime() > this.endDate } }) }, changeEnd (){ this.pickerOptionsEnd = Object.assign({},this.pickerOptionsEnd,{ disabledDate: (time) => { return time.getTime() < this.startDate } }) } } }; var Ctor = Vue.extend(Main) new Ctor().$mount('#app')
Style
@import url("http://unpkg.com/element-ui@2.3.8/lib/theme-chalk/index.css"); .block{ margin-top:10px; }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目實(shí)現(xiàn)對某個(gè)區(qū)域繪制水印
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)對某個(gè)區(qū)域繪制水印,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09Vue3實(shí)現(xiàn)全局loading指令的示例詳解
這篇文章主要介紹了Vue3實(shí)現(xiàn)全局loading指令,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06vue跳轉(zhuǎn)頁面攜帶參數(shù)并且立即執(zhí)行方法
這篇文章主要介紹了vue跳轉(zhuǎn)頁面攜帶參數(shù)并且立即執(zhí)行方法,首先定義跳轉(zhuǎn)函數(shù),結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10vue3父子傳值實(shí)現(xiàn)彈框功能的示例詳解
這篇文章主要為大家詳細(xì)介紹了vue3如何利用父子傳值實(shí)現(xiàn)彈框功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12vue-router實(shí)現(xiàn)組件間的跳轉(zhuǎn)(參數(shù)傳遞)
這篇文章主要為大家詳細(xì)介紹了vue-router實(shí)現(xiàn)組件間的跳轉(zhuǎn),參數(shù)傳遞方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11快速解決vue2+vue-cli3項(xiàng)目ie兼容的問題
這篇文章主要介紹了快速解決vue2+vue-cli3項(xiàng)目ie兼容的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11