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