vue中el-date-picker限制選擇7天內(nèi)&禁止內(nèi)框選擇
需求:elementPlus時(shí)間段選擇框需要滿足:①最多選7天時(shí)間。②不能手動(dòng)輸入。
<el-date-picker v-model="timeArrange" @focus="timeEditable" :editable="false" type="datetimerange" range-separator="至" start-placeholder="開(kāi)始日期" value-format="YYYY-MM-DD HH:mm:ss" :disabled-date="disabledDateFn" @calendar-Change="calendarChange" end-placeholder="結(jié)束日期" style="width: 100%" />
①、限制最多選7天時(shí)間問(wèn)題
加屬性 :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 { // 如果沒(méi)有選擇日期,就要限制不能選擇今天及以后 // 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; }
效果如下:
②限制手動(dòng)輸入問(wèn)題
這里有內(nèi)外兩個(gè)輸入框需要限制
外部 的可以直接用屬性 :editable="false" 限制
內(nèi)部 的這里需要通過(guò) @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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue element-ui el-date-picker限制選擇時(shí)間為當(dāng)天之前的代碼
- vue el-date-picker動(dòng)態(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調(diào)試工具vue-devtools的安裝與使用
vue-devtools是專門調(diào)試vue項(xiàng)目的調(diào)試工具,安裝成功之后,右邊會(huì)出現(xiàn)一個(gè)vue,就可以在線可以調(diào)試vue了,下面這篇文章主要給大家介紹了關(guān)于Vue調(diào)試工具vue-devtools的安裝與使用的相關(guān)資料,需要的朋友可以參考下2022-07-07vue實(shí)現(xiàn)多個(gè)tab標(biāo)簽頁(yè)的切換與關(guān)閉詳細(xì)代碼
這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)多個(gè)tab標(biāo)簽頁(yè)的切換與關(guān)閉的相關(guān)資料,使用vue.js實(shí)現(xiàn)tab切換很簡(jiǎn)單,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10Vue3如何理解ref toRef和toRefs的區(qū)別
本文主要介紹了Vue3如何理解ref toRef和toRefs的區(qū)別,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-12-12使用vue.js實(shí)現(xiàn)聯(lián)動(dòng)效果的示例代碼
本篇文章主要介紹了使用vue.js實(shí)現(xiàn)聯(lián)動(dòng)效果的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01Vue2打包部署后可動(dòng)態(tài)修改后端接口地址的解決方法
本篇文章將介紹使用Vue2開(kāi)發(fā)前后端分離項(xiàng)目時(shí),前端打包部署后可動(dòng)態(tài)修改后端接口地址的解決方法,文中通過(guò)圖文結(jié)合的方式介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07vue頁(yè)面使用阿里oss上傳功能的實(shí)例(一)
本篇文章主要介紹了vue頁(yè)面使用阿里oss上傳功能的實(shí)例(一),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08