詳解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í)吧
何開(kāi)此題
我是一個(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="開(kāi)始日期" 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)文章
假設(shè)?App?的用戶可以在短時(shí)間內(nèi)進(jìn)行多個(gè)?API?調(diào)用,但您只想顯示上次調(diào)用的結(jié)果,之前正在進(jìn)行的請(qǐng)求變得無(wú)關(guān)緊要,在這種情況下,您可以利用?Axios?攔截器,本文給大家介紹了如何使用Axios攔截器中止Vue請(qǐng)求,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vuex中store的action和mutations用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
今天小編就為大家分享一篇Vue點(diǎn)擊切換顏色的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了Vue3中jsoneditor的使用相關(guān)知識(shí),文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以跟隨小編一起了解下2024-01-01
自定義指令，其實(shí)就是在vue提供的鉤子中寫(xiě)代碼，這篇文章將從源碼的角度，帶大家深入了解一下Vue2種自定義指令的實(shí)現(xiàn)與使用，需要的可以參考一下2023-05-05
這篇文章主要為大家詳細(xì)介紹了Vue.js自定義指令的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
詳解Vue Elememt-UI構(gòu)建管理后臺(tái)
本篇文章給大家詳細(xì)分享了Vue Elememt-UI構(gòu)建管理后臺(tái)的過(guò)程以及相關(guān)代碼實(shí)例，一起參考學(xué)習(xí)下。2018-02-02
利用Vue實(shí)現(xiàn)簡(jiǎn)易播放器的完整代碼
這篇文章主要給大家介紹了關(guān)于如何利用Vue實(shí)現(xiàn)簡(jiǎn)易播放器的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
Vue axios 將傳遞的json數(shù)據(jù)轉(zhuǎn)為form data的例子
今天小編就為大家分享一篇Vue axios 將傳遞的json數(shù)據(jù)轉(zhuǎn)為form data的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
vite項(xiàng)目如何從0開(kāi)始配置eslint
這篇文章主要介紹了vite項(xiàng)目如何從0開(kāi)始配置eslint問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03