使用Element+vue實(shí)現(xiàn)開始與結(jié)束時(shí)間限制
更新時(shí)間：2021年08月31日 14:33:12 作者：waillyer
這篇文章主要為大家詳細(xì)介紹了使用Element+vue實(shí)現(xiàn)開始與結(jié)束時(shí)間限制，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了用Element+vue實(shí)現(xiàn)開始與結(jié)束時(shí)間限制的具體代碼，供大家參考，具體內(nèi)容如下
效果
<el-form-item label="開始時(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() { // 限制開始時(shí)間
if (this.endDate != '') {
if (this.endDate <= this.startDate) {
this.$message.warning('結(jié)束時(shí)間必須大于開始時(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í)間必須大于開始時(shí)間！');
this.endDate = '';
}
}
this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
disabledDate: (time) => {
if (this.endDate) {
return time.getTime() > this.endDate;
}
},
});
},
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇axios的攔截請求與響應(yīng)方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue 動(dòng)態(tài)生成拓?fù)鋱D的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
在Vue中使用Echarts實(shí)例圖的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于如何在Vue中使用Echarts實(shí)例圖的相關(guān)資料，文中介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
在vue中利用全局路由鉤子給url統(tǒng)一添加公共參數(shù)的例子
今天小編就為大家分享一篇在vue中利用全局路由鉤子給url統(tǒng)一添加公共參數(shù)的例子，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue面試?？贾甤omputed是如何實(shí)現(xiàn)的
對于每天都在用的計(jì)算屬性(computed)，小編猜大家肯定也想窺探其奧妙與原理對吧，所以這篇文章就來講講computed是如何實(shí)現(xiàn)的吧，感興趣的小伙伴可以學(xué)習(xí)一下2023-08-08
日歷在很多地方都可以使用的到，這篇文章主要介紹了如何利用vue3實(shí)現(xiàn)簡單的日歷控件，文中通過示例代碼講解詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Vue+Webpack完美整合富文本編輯器TinyMce的方法
這篇文章主要介紹了Vue+Webpack完美整合富文本編輯器TinyMce的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
這篇文章主要介紹了vue攔截器如何增加token參數(shù)問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
下面小編就為大家分享一篇vue二級路由設(shè)置方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue 數(shù)組和對象不能直接賦值情況和解決方法(推薦)
這篇文章主要介紹了vue 數(shù)組和對象不能直接賦值情況和解決方法,需要的朋友可以參考下2017-10-10