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