亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue中el-date-picker限制選擇7天內(nèi)&禁止內(nèi)框選擇

 更新時(shí)間:2023年12月20日 11:40:20   作者:QQ帝國(guó)  
項(xiàng)目中需要選擇時(shí)間范圍,并且只能選擇當(dāng)前日期之后的七天,本文就來(lái)介紹了vue中el-date-picker限制選擇7天內(nèi)&禁止內(nèi)框選擇,具有一定的參考價(jià)值,感興趣的可以了解一下

 需求: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)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue調(diào)試工具vue-devtools的安裝與使用

    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-07
  • axios攔截器工作方式及原理源碼解析

    axios攔截器工作方式及原理源碼解析

    這篇文章主要為大家介紹了axios攔截器工作原理源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-02-02
  • vue實(shí)現(xiàn)多個(gè)tab標(biāo)簽頁(yè)的切換與關(guān)閉詳細(xì)代碼

    vue實(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-10
  • vue+iview實(shí)現(xiàn)文件上傳

    vue+iview實(shí)現(xiàn)文件上傳

    這篇文章主要為大家詳細(xì)介紹了vue+iview實(shí)現(xiàn)文件上傳,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-11-11
  • Vue3如何理解ref toRef和toRefs的區(qū)別

    Vue3如何理解ref toRef和toRefs的區(qū)別

    本文主要介紹了Vue3如何理解ref toRef和toRefs的區(qū)別,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-12-12
  • vue fetch中的.then()的正確使用方法

    vue fetch中的.then()的正確使用方法

    這篇文章主要介紹了vue fetch中的.then()的正確使用方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04
  • 使用vue.js實(shí)現(xiàn)聯(lián)動(dòng)效果的示例代碼

    使用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-01
  • 一文搞懂VueJs中customRef函數(shù)使用

    一文搞懂VueJs中customRef函數(shù)使用

    這篇文章主要為大家介紹了VueJs中customRef函數(shù)使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-04-04
  • Vue2打包部署后可動(dòng)態(tài)修改后端接口地址的解決方法

    Vue2打包部署后可動(dòng)態(tài)修改后端接口地址的解決方法

    本篇文章將介紹使用Vue2開(kāi)發(fā)前后端分離項(xiàng)目時(shí),前端打包部署后可動(dòng)態(tài)修改后端接口地址的解決方法,文中通過(guò)圖文結(jié)合的方式介紹的非常詳細(xì),需要的朋友可以參考下
    2024-07-07
  • vue頁(yè)面使用阿里oss上傳功能的實(shí)例(一)

    vue頁(yè)面使用阿里oss上傳功能的實(shí)例(一)

    本篇文章主要介紹了vue頁(yè)面使用阿里oss上傳功能的實(shí)例(一),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-08-08

最新評(píng)論