vue el-date-picker 開始日期不能大于結(jié)束日期的實(shí)現(xiàn)代碼
更新時間：2024年01月26日 15:23:40 作者：guochanof
這篇文章主要介紹了vue el-date-picker 開始日期不能大于結(jié)束日期的實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(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)文章
vue和webpack項(xiàng)目構(gòu)建過程常用的npm命令詳解
本文通過實(shí)例代碼給大家介紹了vue和webpack項(xiàng)目構(gòu)建過程常用的npm命令,需要的朋友可以參考下2018-06-06
Vue項(xiàng)目運(yùn)行時報錯：JS內(nèi)存溢出的解決方法
這篇文章主要介紹了Vue項(xiàng)目運(yùn)行時出現(xiàn)JavaScript堆內(nèi)存已滿的錯誤,并討論了解決方法,通過下載特定插件并修改相關(guān)文件,解決了項(xiàng)目運(yùn)行時的內(nèi)存溢出問題,需要的朋友可以參考下2025-05-05
vue中watch的實(shí)際開發(fā)學(xué)習(xí)筆記
watch是Vue實(shí)例的一個屬性是用來響應(yīng)數(shù)據(jù)的變化,需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時,這個方式是最有用的,下面這篇文章主要給大家介紹了關(guān)于vue中watch的實(shí)際開發(fā)筆記,需要的朋友可以參考下2022-11-11
VSCode創(chuàng)建Vue項(xiàng)目的完整步驟教程
Vue是一個輕量級、漸進(jìn)式的Javascript框架,如果想要要開發(fā)全新的Vue項(xiàng)目,建議項(xiàng)目構(gòu)建工具vue-cli,下面這篇文章主要給大家介紹了關(guān)于VSCode創(chuàng)建Vue項(xiàng)目的完整步驟,需要的朋友可以參考下2022-06-06
在開始學(xué)習(xí)vue的時候,對于新手安裝這個環(huán)境是真的搞人心態(tài),不友好,下面這篇文章主要給大家介紹了關(guān)于Vue安裝與環(huán)境配置的相關(guān)資料,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue slot 在子組件中顯示父組件傳遞的模板,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了vue中使用微信公眾號js-sdk踩坑記錄，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
vue keep-alive 動態(tài)刪除組件緩存的例子
今天小編就為大家分享一篇vue keep-alive 動態(tài)刪除組件緩存的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
element-vue實(shí)現(xiàn)網(wǎng)頁鎖屏功能(示例代碼)
這篇文章主要介紹了element-vue實(shí)現(xiàn)網(wǎng)頁鎖屏功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11
前端請求超時截斷axios?timeout設(shè)置未生效情況解決記錄
在項(xiàng)目中遇到了后臺接口返回數(shù)據(jù)慢的時候往往需要設(shè)置請求失效時間,在項(xiàng)目中遇到設(shè)置timeout失效問題由此記錄下來,這篇文章主要給大家介紹了前端請求超時截斷axios?timeout設(shè)置未生效情況解決的相關(guān)資料,需要的朋友可以參考下2024-07-07