詳解element-ui動態(tài)限定的日期范圍選擇器代碼片段
更新時間：2020年07月03日 08:39:44 作者：大暗扣
這篇文章主要介紹了element-ui動態(tài)限定的日期范圍選擇器代碼片段，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
何開此題
我是一個碼農，緣起就是這次需求遇到了之前實現(xiàn)過的功能細節(jié)，不想再從頭翻組件文檔實現(xiàn)一遍，最好是直接拷貝粘貼。
細節(jié)
picker-options 設定規(guī)則：時間范圍最大可選擇30天, 最晚時間為今天。
element-ui 的日期選擇器的組件是 el-date-picker.
設定 pickerOptions2，
data() {
return {
pickerOptions2: {
disabledDate: theDate => {
const oneDay = 3600 * 1000 * 24
const current = theDate.getTime()
const now = Date.now()
const condition1 = current > now
if (!this.minDateTimestamp) return condition1
const pickerRangeNum = 30
// 時間范圍最大可選擇30天,最晚時間為今天
const lastMonthBegin = this.minDateTimestamp
const lastMonthEnd = lastMonthBegin + pickerRangeNum * oneDay
return (
condition1 || current < lastMonthBegin || current > lastMonthEnd
)
},
onPick: ({ maxDate, minDate }) => {
this.minDateTimestamp = minDate.getTime()
if (maxDate) {
this.minDateTimestamp = 0
}
},
},
}
},
模板的設定，
<template> <el-date-picker class="form-item-control" v-model="qo2.dateRange2" type="daterange" range-separator=" 至 " start-placeholder="開始日期" end-placeholder="結束日期" placeholder="請選擇時間段" :picker-options="pickerOptions2" /> </template>
總結
element-ui 動態(tài)限定的日期范圍選擇器，再回首，不用愁。
到此這篇關于element-ui動態(tài)限定的日期范圍選擇器代碼片段的文章就介紹到這了,更多相關element-ui動態(tài)限定的日期范圍選擇器代碼片段內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了vue中使用svg封裝全局消息提示組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
Vue 提供了一個強大的過渡系統(tǒng),可以用于在進入、離開和列表渲染時添加各種動畫效果,這些過渡不僅能夠提升用戶體驗,還能使界面更加生動和吸引人,本文將介紹 Vue 中實現(xiàn)過渡效果的基本方法,并提供使用 setup 語法糖的代碼示例,需要的朋友可以參考下2024-09-09
在Vue3項目中使用VueCropper裁剪組件實現(xiàn)裁剪及預覽效果
這篇文章主要介紹了在Vue3項目中使用VueCropper裁剪組件（裁剪及預覽效果）,本文分步驟結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了詳解vuex中mutation/action的傳參方式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
本篇文章主要介紹了Vue表單類的父子組件數(shù)據(jù)傳遞示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
element-ui中頁面縮放時table表格內容錯位的解決
這篇文章主要介紹了element-ui中頁面縮放時table表格內容錯位的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
組件又分為非單文件組件和單文件組件，一般常用的就是單文件組件，這篇文章主要介紹了vue組件非單文件組件的使用步驟,需要的朋友可以參考下2023-01-01
這篇文章主要給大家介紹了關于VUE3引入html文件并傳值的相關資料,這是最近在項目中遇到了的一個需求,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-07-07
響應式?API?賦予了組合式?API?一大坨可能性的同時,代碼精簡,雖然但是,我們應該意識到響應性的某些陷阱,比如丟失響應性,在本文中,我們將學習如何正確解構?Vue?組件的?props,使得?props?不會丟失響應性2024-01-01
前端使用vue實現(xiàn)token無感刷新的三種方案解析
這篇文章主要為大家介紹了前端使用vue實現(xiàn)token無感刷新的三種方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06