快捷導(dǎo)航

vue2使用el-date-picker實(shí)現(xiàn)動(dòng)態(tài)日期范圍demo

更新時(shí)間：2023年06月09日 10:21:45 作者：蛋炒太陽

這篇文章主要為大家介紹了vue2使用el-date-picker實(shí)現(xiàn)動(dòng)態(tài)日期范圍示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

Vue2 & element ui

<el-date-picker type="daterange" :picker-options="pickerOptions"
let _minTime;
let _maxTime;
let timeRange = 10 * 24 * 60 * 60 * 1000;
export default {
    data() {
        return {
            pickerOptions:{
                  onPick(time) {
                      if (!time.maxDate) {
                        _minTime = time.minDate.getTime() - timeRange;
                        _maxTime = time.minDate.getTime() + timeRange;
                        } else {
                        _minTime = null;
                        _maxTime = null;
                        }
                    },
                  disabledDate(time) {
                    if (_minTime && _maxTime) {
                    return time.getTime() < _minTime || time.getTime() > _maxTime;
                    }
                }
            }
        };
    }
    ……
};

Vue3 & element plus

<el-date-picker  type="daterange" :disabled-date="disabledDate" @calendar-change="eventCalendarChange"
let _minTime = null;
let _maxTime = null;
let timeRange = 3 * 30 * 24 * 60 * 60 * 1000;
const disabledDate = (time) => {
    if (_minTime && _maxTime) {
        return time.getTime() < _minTime || time.getTime() > _maxTime;
    }
};
const eventCalendarChange = (data) => {
    const [ start ] = data;
    if (start) {
        _minTime = start.getTime() - timeRange;
        _maxTime = start.getTime() + timeRange;
    } else {
        _minTime = null;
        _maxTime = null;
    }
};

以上就是vue2使用el-date-picker實(shí)現(xiàn)動(dòng)態(tài)日期范圍示例的詳細(xì)內(nèi)容，更多關(guān)于vue2 el-date-picker的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

vue實(shí)現(xiàn)移動(dòng)端拖動(dòng)排序
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端拖動(dòng)排序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-08-08
vue3使用particles插件實(shí)現(xiàn)粒子背景的方法詳解
這篇文章主要為大家詳細(xì)介紹了vue3使用particles插件實(shí)現(xiàn)粒子背景的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-03-03
圖文詳解vue中proto文件的函數(shù)調(diào)用
這篇文章主要給大家介紹了vue中proto文件函數(shù)調(diào)用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2021-08-08
Vue全局注冊(cè)中的kebab-case和PascalCase用法
這篇文章主要介紹了Vue全局注冊(cè)中的kebab-case和PascalCase用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
vue中實(shí)現(xiàn)支持txt,docx,xlsx,mp4格式文件預(yù)覽功能(純前端)
對(duì)于Vue你可以實(shí)現(xiàn)文件的預(yù)覽功能,這篇文章主要給大家介紹了關(guān)于vue中實(shí)現(xiàn)支持txt,docx,xlsx,mp4格式文件預(yù)覽功能的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-11-11
Vue詳細(xì)講解Vuex狀態(tài)管理的實(shí)現(xiàn)
這篇文章主要介紹了Vuex狀態(tài)管理器的使用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-08-08
Vue3使用時(shí)應(yīng)避免的10個(gè)錯(cuò)誤總結(jié)
Vue?3已經(jīng)穩(wěn)定了相當(dāng)長(zhǎng)一段時(shí)間了。許多代碼庫(kù)都在生產(chǎn)環(huán)境中使用它，其他人最終都將不得不遷移到Vue?3。我現(xiàn)在有機(jī)會(huì)使用它并記錄了我的錯(cuò)誤，下面這些錯(cuò)誤你可能想要避免
2023-03-03
vue axios重復(fù)點(diǎn)擊取消上一次請(qǐng)求封裝的方法
這篇文章主要介紹了vue axios重復(fù)點(diǎn)擊取消上一次請(qǐng)求封裝的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
Vue加載組件、動(dòng)態(tài)加載組件的幾種方式
組件是Vue.js最強(qiáng)大的功能之一。組件可以擴(kuò)展HTML元素，封裝可重用的代碼。這篇文章通過實(shí)例代碼給大家介紹了Vue加載組件、動(dòng)態(tài)加載組件的幾種方式，需要的朋友參考下吧
2018-08-08
啟動(dòng)myvue報(bào)錯(cuò)npm?ERR!?code?ENOENT?npm?ERR!?syscall?open的解
這篇文章主要介紹了啟動(dòng)myvue報(bào)錯(cuò)npm?ERR!?code?ENOENT?npm?ERR!?syscall?open的解決辦法,文中給出了詳細(xì)的解決方法,并通過圖文結(jié)合的方式介紹的非常詳細(xì),需要的朋友可以參考下
2024-03-03