vue el-date-picker 開始日期不能大于結(jié)束日期的實(shí)現(xiàn)代碼
更新時(shí)間：2024年01月26日 15:23:40 作者：guochanof
這篇文章主要介紹了vue el-date-picker 開始日期不能大于結(jié)束日期的實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
HTML
<el-form-item label="開始日期" prop="startTime">
<el-date-picker clearable v-model="form.startTime" type="date" value-format="yyyy-MM-dd" :picker-options="pickerOptionsStartq" placeholder="請(qǐng)選擇開始時(shí)間">
</el-date-picker>
</el-form-item>
<el-form-item label="結(jié)束日期" prop="endTime">
<el-date-picker clearable v-model="form.endTime" type="date" value-format="yyyy-MM-dd" :picker-options="pickerOptionsEndq" placeholder="請(qǐng)選擇結(jié)束時(shí)間">
</el-date-picker>
</el-form-item>JS: (寫在data內(nèi))
滿足開始日期不能大于結(jié)束日期,并且****幾種情況如下:
開始日期不能大于結(jié)束日期
pickerOptionsStart: {
disabledDate: time => {
if (this.form.endTime) {
return (
time.getTime() >
new Date(this.form.endTime).getTime() -
1 * 24 * 60 * 60 * 1000
);
}
}
},
pickerOptionsEnd: {
disabledDate: time => {
return (
time.getTime() <
new Date(this.form.startTime).getTime() -
8.64e7 +
1 * 24 * 60 * 60 * 1000
);
}
},開始日期不能大于結(jié)束日期 --選擇今天以后的日期--今天可選
pickerOptionsStart: {
disabledDate: time => {
if (this.form.endTime) {
return (
time.getTime() < Date.now() - 8.64e7 ||
time.getTime() >
new Date(this.form.endTime).getTime() - 1 * 24 * 60 * 60 * 1000
);
}
return time.getTime() < Date.now() - 8.64e7;
}
},
pickerOptionsEnd: {
disabledDate: time => {
return (
time.getTime() < Date.now() - 8.64e7 ||
time.getTime() <
new Date(this.form.startTime).getTime() -
8.64e7 +
1 * 24 * 60 * 60 * 1000
);
}
},開始日期不能大于結(jié)束日期--選擇今天以后的日期--今天不可選
pickerOptionsStart: {
disabledDate: time => {
if (this.form.endTime) {
return (
time.getTime() < Date.now() - 8.64e7 ||
time.getTime() >
new Date(this.form.endTime).getTime() - 1 * 24 * 60 * 60 * 1000
);
}
return time.getTime() < Date.now();
}
},
pickerOptionsEnd: {
disabledDate: time => {
return (
time.getTime() < Date.now() ||
time.getTime() <
new Date(this.form.startTime).getTime() -
8.64e7 +
1 * 24 * 60 * 60 * 1000
);
}
},開始日期不能大于結(jié)束日期--選擇今后一年內(nèi)的日期
pickerOptionsStart: {
disabledDate: time => {
if (this.form.endTime) {
return (
time.getTime() <
new Date(this.form.endTime).getTime() - 365 * 24 * 60 * 60 * 1000
);
}
}
},
pickerOptionsEnd: {
disabledDate: time => {
return (
time.getTime() >
new Date(this.form.startTime).getTime() +
8.64e7 +
365 * 24 * 60 * 60 * 1000
);
}
},只有一個(gè)日期框, 要求只能選今天以后的
pickerOptions: {
disabledDate: time => {
// return time.getTime() < Date.now() - 8.64e7; // 今天可選
return time.getTime() < Date.now();//今天不可選
}
},到此這篇關(guān)于vue el-date-picker 開始日期不能大于結(jié)束日期的文章就介紹到這了,更多相關(guān)vue el-date-picker 開始日期不能大于結(jié)束日期內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript中Set、Map、WeakSet、WeakMap區(qū)別
這篇文章主要介紹了javascript中Set、Map、WeakSet、WeakMap區(qū)別,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue3中使用swiper及遇到的問題,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
Vue.js動(dòng)態(tài)添加、刪除選題的實(shí)例代碼
這篇文章主要介紹了Vue.js動(dòng)態(tài)添加、刪除選題的實(shí)例代碼,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
vue-better-scroll 的使用實(shí)例代碼詳解
這篇文章主要介紹了vue-better-scroll 的使用實(shí)例代碼詳解，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-12-12
vue中v-model如何綁定多循環(huán)表達(dá)式實(shí)戰(zhàn)案例
v-model綁定的變量無(wú)論是對(duì)象還是數(shù)組都是綁定的value值,下面這篇文章主要給大家介紹了關(guān)于vue中v-model如何綁定多循環(huán)表達(dá)式的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue的兼容性解決方案Babel-polyfill的相關(guān)知識(shí),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
Element中el-tabs左右滑動(dòng)動(dòng)畫的實(shí)現(xiàn)
本篇博客將詳細(xì)介紹如何在使用 Vue 以及 Element UI 時(shí),實(shí)現(xiàn)一個(gè)具有左右滑動(dòng)效果的 tab 切換動(dòng)畫,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-03-03
Vue數(shù)據(jù)驅(qū)動(dòng)模擬實(shí)現(xiàn)1
這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動(dòng)模擬實(shí)現(xiàn)的相關(guān)資料，允許采用簡(jiǎn)潔的模板語(yǔ)法聲明式的將數(shù)據(jù)渲染進(jìn)DOM，且數(shù)據(jù)與DOM綁定在一起，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
本篇文章通過代碼實(shí)例給大家詳細(xì)講述了一個(gè)vue的實(shí)例，實(shí)現(xiàn)只彈一次彈框功能，一起學(xué)習(xí)分享下。2018-01-01
今天來(lái)說(shuō)說(shuō)權(quán)限管理，因?yàn)榫W(wǎng)上已經(jīng)有很多關(guān)于這方面的很多內(nèi)容，下面這篇文章主要給大家介紹了關(guān)于vue權(quán)限問題的完美解決方案，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05