vue中el-date-picker限制選擇7天內(nèi)&禁止內(nèi)框選擇
需求:elementPlus時(shí)間段選擇框需要滿足:①最多選7天時(shí)間。②不能手動輸入。
<el-date-picker
v-model="timeArrange"
@focus="timeEditable"
:editable="false"
type="datetimerange"
range-separator="至" start-placeholder="開始日期"
value-format="YYYY-MM-DD HH:mm:ss"
:disabled-date="disabledDateFn"
@calendar-Change="calendarChange"
end-placeholder="結(jié)束日期"
style="width: 100%"
/>①、限制最多選7天時(shí)間問題
加屬性 :disabled-date="disabledDateFn" 和 @calendar-Change="calendarChange"
const disabledDateFn = (time: any) => {
// 如何選擇了一個(gè)日期
if (choiceDate.value) {
// 7天的時(shí)間戳
const one = 6 * 24 * 3600 * 1000;
// 當(dāng)前日期 - one = 7天之前
const minTime = choiceDate.value - one;
// 當(dāng)前日期 + one = 7天之后
const maxTime = choiceDate.value + one;
return (
time.getTime() < minTime ||
time.getTime() > maxTime
// 限制不能選擇今天及以后
// || time.getTime() + 1 * 24 * 3600 * 1000 > Date.now()
);
} else {
// 如果沒有選擇日期,就要限制不能選擇今天及以后
// return time.getTime() + 1 * 24 * 3600 * 1000 > Date.now();
}
}
const calendarChange = (obj: any) => {
const minDate = obj[0]
const maxDate = obj[1]
// 把選擇的第一個(gè)日期賦值給一個(gè)變量。
choiceDate.value = minDate.getTime();
// 如何你選擇了兩個(gè)日期了,就把那個(gè)變量置空
if (maxDate) choiceDate.value = null;
}效果如下:

②限制手動輸入問題

這里有內(nèi)外兩個(gè)輸入框需要限制
外部 的可以直接用屬性 :editable="false" 限制
內(nèi)部 的這里需要通過 @focus="timeEditable" 把 input 內(nèi)框輸入都變成只讀狀態(tài)。
//組件禁止組件里面的input輸入值
const timeEditable = ()=>{
nextTick(() => {
let els = document.querySelectorAll('.el-input__wrapper input');
for (var i = 0; i <= els.length - 1; i++) {
els[i].setAttribute('readonly', 'readonly');
}
})
}這樣需求就實(shí)現(xiàn)了

到此這篇關(guān)于vue中el-date-picker限制選擇7天內(nèi)&禁止內(nèi)框選擇的文章就介紹到這了,更多相關(guān)el-date-picker限制選擇7天內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue element-ui el-date-picker限制選擇時(shí)間為當(dāng)天之前的代碼
- vue el-date-picker動態(tài)限制時(shí)間范圍案例詳解
- el-date-picker日期選擇限制范圍的實(shí)例代碼
- elementUI組件中el-date-picker限制時(shí)間范圍精確到小時(shí)的方法
- el-date-picker日期范圍限制的實(shí)現(xiàn)
- Vue?中如何使用?el-date-picker?限制只能選擇當(dāng)天、當(dāng)天之前或當(dāng)天之后日期的方法詳解
- vue中el-date-picker選擇日期的限制的項(xiàng)目實(shí)踐
相關(guān)文章
vue上傳文件formData入?yún)榭?接口請求500的解決
這篇文章主要介紹了vue上傳文件formData入?yún)榭?接口請求500的解決,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06
vue3.0 CLI - 2.4 - 新組件 Forms.vue 中學(xué)習(xí)表單
這篇文章主要介紹了vue3.0 CLI - 2.4 - 新組件 Forms.vue 中學(xué)習(xí)表單的相關(guān)知識,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-09-09
vue中swiper開啟loop后,點(diǎn)擊事件不響應(yīng)的解決方案
這篇文章主要介紹了vue中swiper開啟loop后,點(diǎn)擊事件不響應(yīng)的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09
如何在vue項(xiàng)目中使用UEditor--plus
UEditor是由百度web前端研發(fā)部開發(fā)的所見即所得的開源富文本編輯器,這篇文章主要介紹了如何在vue項(xiàng)目中使用UEditor--plus?,需要的朋友可以參考下2022-08-08
在Vue中創(chuàng)建可重用的 Transition的方法
這篇文章主要介紹了在Vue中創(chuàng)建可重用的 Transition,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
vue實(shí)現(xiàn)進(jìn)入某個(gè)頁面后替換地址欄路徑的操作方法
vue頁面在實(shí)際開發(fā)中,經(jīng)常會遇到改變url參數(shù),重新加載頁面數(shù)據(jù)的需求,但是只改變頁面url并不會觸發(fā)組件的生命周期,這就需要用其他方法來實(shí)現(xiàn)了,本文重點(diǎn)介紹vue實(shí)現(xiàn)進(jìn)入某個(gè)頁面后替換地址欄路徑的操作方法,感興趣的朋友跟隨小編一起看看吧2024-04-04

