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