element-ui 限制日期選擇的方法(datepicker)
更新時間:2018年05月16日 14:29:07 作者:知止至得
本篇文章主要介紹了element-ui 限制日期選擇的方法(datepicker),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
Element-UI是餓了么前端團隊推出的一款基于Vue.js 2.0 的桌面端UI框架,手機端有對應(yīng)框架是 Mint UI 。
需求場景如下:
- 指定起止日期,后選的將會受到先選的限制
- 不同的日期選擇器,不過也存在關(guān)聯(lián)關(guān)系
實現(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)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue跳轉(zhuǎn)頁面攜帶參數(shù)并且立即執(zhí)行方法
這篇文章主要介紹了vue跳轉(zhuǎn)頁面攜帶參數(shù)并且立即執(zhí)行方法,首先定義跳轉(zhuǎn)函數(shù),結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友參考下吧2023-10-10vue-router實現(xiàn)組件間的跳轉(zhuǎn)(參數(shù)傳遞)
這篇文章主要為大家詳細介紹了vue-router實現(xiàn)組件間的跳轉(zhuǎn),參數(shù)傳遞方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-11-11