使用Element+vue實現(xiàn)開始與結(jié)束時間限制
更新時間:2021年08月31日 14:33:12 作者:waillyer
這篇文章主要為大家詳細介紹了使用Element+vue實現(xiàn)開始與結(jié)束時間限制,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了用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)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
Vue項目總結(jié)之webpack常規(guī)打包優(yōu)化方案
這篇文章主要介紹了vue項目總結(jié)之webpack常規(guī)打包優(yōu)化方案,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
vue 和vue-touch 實現(xiàn)移動端左右導(dǎo)航效果(仿京東移動站導(dǎo)航)
這篇文章主要介紹了vue 和vue-touch 實現(xiàn)移動端左右導(dǎo)航效果(仿京東移動站導(dǎo)航),需要的朋友可以參考下2017-04-04
一篇文章帶你使用Typescript封裝一個Vue組件(簡單易懂)
這篇文章主要介紹了使用Typescript封裝一個Vue組件,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06

