使用Element+vue實現(xiàn)開始與結(jié)束時間限制
更新時間:2021年08月31日 14:33:12 作者:waillyer
這篇文章主要為大家詳細(xì)介紹了使用Element+vue實現(xiàn)開始與結(jié)束時間限制,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了用Element+vue實現(xiàn)開始與結(jié)束時間限制的具體代碼,供大家參考,具體內(nèi)容如下
效果
<el-form-item label="開始時間"> <el-date-picker v-model="startDate" type="datetime" placeholder="選擇日期" format="yyyy-MM-dd HH:mm:ss" value-format="timestamp" :editable="false" :picker-options="pickerOptionsStart" @change="changeStart"> </el-date-picker> </el-form-item> <el-form-item label="結(jié)束時間"> <el-date-picker v-model="endDate" type="datetime" placeholder="選擇日期" style="width: 100%;" format="yyyy-MM-dd HH:mm:ss" value-format="timestamp" :clearable="true" :editable="false" :picker-options="pickerOptionsEnd" @change="changeEnd"> </el-date-picker> </el-form-item>
pickerOptionsStart: {}, pickerOptionsEnd: {}, startDate: '', endDate: '', changeStart() { // 限制開始時間 if (this.endDate != '') { if (this.endDate <= this.startDate) { this.$message.warning('結(jié)束時間必須大于開始時間!'); this.startDate = ''; } } this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, { disabledDate: (time) => { if (this.startDate) { return time.getTime() < this.startDate; } }, }); }, changeEnd() { // 限制結(jié)束時間 console.log(this.endDate); if (this.startDate != '') { if (this.endDate <= this.startDate) { this.$message.warning('結(jié)束時間必須大于開始時間!'); this.endDate = ''; } } this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, { disabledDate: (time) => { if (this.endDate) { return time.getTime() > this.endDate; } }, }); },
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue實現(xiàn)關(guān)聯(lián)頁面多級跳轉(zhuǎn)(頁面下鉆)功能的完整實例
這篇文章主要給大家介紹了關(guān)于Vue實現(xiàn)關(guān)聯(lián)頁面多級跳轉(zhuǎn)(頁面下鉆)功能的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03Vue項目總結(jié)之webpack常規(guī)打包優(yōu)化方案
這篇文章主要介紹了vue項目總結(jié)之webpack常規(guī)打包優(yōu)化方案,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06vue 和vue-touch 實現(xiàn)移動端左右導(dǎo)航效果(仿京東移動站導(dǎo)航)
這篇文章主要介紹了vue 和vue-touch 實現(xiàn)移動端左右導(dǎo)航效果(仿京東移動站導(dǎo)航),需要的朋友可以參考下2017-04-04一篇文章帶你使用Typescript封裝一個Vue組件(簡單易懂)
這篇文章主要介紹了使用Typescript封裝一個Vue組件,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06