使用Element+vue實(shí)現(xiàn)開(kāi)始與結(jié)束時(shí)間限制
本文實(shí)例為大家分享了用Element+vue實(shí)現(xiàn)開(kāi)始與結(jié)束時(shí)間限制的具體代碼,供大家參考,具體內(nèi)容如下
效果
<el-form-item label="開(kāi)始時(shí)間"> <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é)束時(shí)間"> <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() { // 限制開(kāi)始時(shí)間 if (this.endDate != '') { if (this.endDate <= this.startDate) { this.$message.warning('結(jié)束時(shí)間必須大于開(kāi)始時(shí)間!'); this.startDate = ''; } } this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, { disabledDate: (time) => { if (this.startDate) { return time.getTime() < this.startDate; } }, }); }, changeEnd() { // 限制結(jié)束時(shí)間 console.log(this.endDate); if (this.startDate != '') { if (this.endDate <= this.startDate) { this.$message.warning('結(jié)束時(shí)間必須大于開(kāi)始時(shí)間!'); this.endDate = ''; } } this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, { disabledDate: (time) => { if (this.endDate) { return time.getTime() > this.endDate; } }, }); },
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
如何使用vue實(shí)現(xiàn)跨域訪問(wèn)第三方http請(qǐng)求
這篇文章主要介紹了如何使用vue實(shí)現(xiàn)跨域訪問(wèn)第三方http請(qǐng)求,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03Vue實(shí)現(xiàn)關(guān)聯(lián)頁(yè)面多級(jí)跳轉(zhuǎn)(頁(yè)面下鉆)功能的完整實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)關(guān)聯(lián)頁(yè)面多級(jí)跳轉(zhuǎn)(頁(yè)面下鉆)功能的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03Vue 用Vant實(shí)現(xiàn)時(shí)間選擇器的示例代碼
這篇文章主要介紹了Vue 用Vant實(shí)現(xiàn)時(shí)間選擇器的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10Vue項(xiàng)目總結(jié)之webpack常規(guī)打包優(yōu)化方案
這篇文章主要介紹了vue項(xiàng)目總結(jié)之webpack常規(guī)打包優(yōu)化方案,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06vue 和vue-touch 實(shí)現(xiàn)移動(dòng)端左右導(dǎo)航效果(仿京東移動(dòng)站導(dǎo)航)
這篇文章主要介紹了vue 和vue-touch 實(shí)現(xiàn)移動(dòng)端左右導(dǎo)航效果(仿京東移動(dòng)站導(dǎo)航),需要的朋友可以參考下2017-04-04一篇文章帶你使用Typescript封裝一個(gè)Vue組件(簡(jiǎn)單易懂)
這篇文章主要介紹了使用Typescript封裝一個(gè)Vue組件,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06