快捷導(dǎo)航

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

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

這篇文章主要為大家介紹了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 CLI3創(chuàng)建項(xiàng)目部署到Tomcat 使用ngrok映射到外網(wǎng)
這篇文章主要介紹了Vue CLI3創(chuàng)建項(xiàng)目部署到Tomcat 使用ngrok映射到外網(wǎng),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-05-05
VUE3中實(shí)現(xiàn)拖拽與縮放自定義看板vue-grid-layout詳解
想實(shí)現(xiàn)桌面自由拖拽布局的效果,找到了vue-grid-layout柵格布局插件,可以完美解決,下面這篇文章主要給大家介紹了關(guān)于VUE3中實(shí)現(xiàn)拖拽與縮放自定義看板vue-grid-layout的相關(guān)資料,需要的朋友可以參考下
2023-02-02
vue/react單頁(yè)應(yīng)用后退不刷新方案
本文主要介紹了vue/react單頁(yè)應(yīng)用后退不刷新方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
vue 點(diǎn)擊其他區(qū)域關(guān)閉自定義div操作
這篇文章主要介紹了vue 點(diǎn)擊其他區(qū)域關(guān)閉自定義div操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
vue實(shí)現(xiàn)釘釘?shù)目记谌諝v
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)釘釘?shù)目记谌諝v，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-05-05
Vue.js在使用中的一些注意知識(shí)點(diǎn)
這篇文章主要給大家介紹了Vue.js在使用中的一些注意知識(shí)點(diǎn)，文中介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-04-04
關(guān)于vue.js發(fā)布后路徑引用的問(wèn)題解決
最近在vue.js項(xiàng)目發(fā)布后發(fā)現(xiàn)了一個(gè)關(guān)于路徑的問(wèn)題，發(fā)現(xiàn)網(wǎng)上關(guān)于這個(gè)的資料較少，所以給大家總結(jié)下，下面這篇文章主要給大家介紹了如何解決關(guān)于vue.js發(fā)布后路徑引用的問(wèn)題，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
2017-08-08
Vue項(xiàng)目中對(duì)index.html中BASE_URL的配置方式
這篇文章主要介紹了Vue項(xiàng)目中對(duì)index.html中BASE_URL的配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
vue手寫(xiě)<RouterLink/>組件實(shí)現(xiàn)demo詳解
這篇文章主要為大家介紹了vue手寫(xiě)<RouterLink/>組件實(shí)現(xiàn)demo詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
react和vue的事件處理差異詳解
這篇文章主要介紹了react和vue的事件處理差異,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03