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