element-ui時(shí)間日期選擇器限制選擇范圍的幾種場(chǎng)景
組件代碼
<el-date-picker v-model="timeVal" value-format="yyyy/MM/dd" format="yyyy/MM/dd" size="small" :picker-options="pickerOptions" type="daterange" placeholder="自定義時(shí)間" @change="onchangeTime" > </el-date-picker>
場(chǎng)景1:設(shè)置選擇今天及今天之后的日期
data (){ return { pickerOptions: { disabledDate(time) { return time.getTime() < Date.now() - 8.64e7; } }, } }
情景2: 設(shè)置選擇今天以及今天以前的日期
data (){ return { pickerOptions: { disabledDate(time) { return time.getTime() > Date.now() - 8.64e6; } }, } }
情景3: 設(shè)置選擇三個(gè)月之內(nèi)到今天的日期
data (){ return { pickerOptions: { disabledDate(time) { let curDate = (new Date()).getTime(); let three = 90 * 24 * 3600 * 1000; let threeMonths = curDate - three; return time.getTime() > Date.now() || time.getTime() < threeMonths; } }, } }
情景4: 設(shè)置選擇最大范圍為30天
data (){ return { pickerMinDate: null, pickerMaxDate: null, pickerOptions: { onPick: ({ maxDate, minDate }) => { if (minDate && this.pickerMinDate) { this.pickerMinDate = null; } else if (minDate) { this.pickerMinDate = minDate.getTime(); } }, disabledDate: (time) => { if (this.pickerMinDate) { const day1 = 30 * 24 * 3600 * 1000 let maxTime = this.pickerMinDate + day1 let minTime = this.pickerMinDate - day1 return time.getTime() > maxTime || time.getTime()<minTime || time.getTime() > Date.now() } else { return time.getTime() > Date.now() } }, }, } }
總結(jié)
到此這篇關(guān)于element-ui時(shí)間日期選擇器限制選擇范圍的幾種場(chǎng)景的文章就介紹到這了,更多相關(guān)element-ui日期選擇器限制范圍內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Element Plus 日期選擇器獲取選中的日期格式(當(dāng)前日期/時(shí)間戳格式)
- element?ui時(shí)間日期選擇器el-date-picker報(bào)錯(cuò)Prop?being?mutated:"placement"解決方式
- 關(guān)于element-ui日期時(shí)間選擇器選不中12小時(shí)以后的時(shí)間詳解
- ElementUI日期選擇器時(shí)間選擇范圍限制的實(shí)現(xiàn)
- Element DateTimePicker日期時(shí)間選擇器的使用示例
- 詳解element-ui日期時(shí)間選擇器的日期格式化問(wèn)題
- element日期時(shí)間選擇器限制時(shí)間選擇功能實(shí)現(xiàn)(精確到小時(shí))
相關(guān)文章
Vue自定義指令學(xué)習(xí)及應(yīng)用詳解
這篇文章主要為大家詳細(xì)介紹了Vue中自定義指令的學(xué)習(xí)以及如何利用Vue制作一個(gè)簡(jiǎn)單的學(xué)生信息管理系統(tǒng),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-05-05關(guān)于ElementPlus中的表單驗(yàn)證規(guī)則詳解
這篇文章主要介紹了關(guān)于ElementPlus中的表單驗(yàn)證,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-06-06Vue3實(shí)現(xiàn)canvas畫布組件自定義畫板實(shí)例代碼
Vue?Canvas是一個(gè)基于Vue.js的輕量級(jí)畫板組件,旨在提供一個(gè)簡(jiǎn)易的畫布功能,用戶可以在網(wǎng)頁(yè)上進(jìn)行自由繪圖,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09Vue中nprogress頁(yè)面加載進(jìn)度條的方法實(shí)現(xiàn)
這篇文章主要介紹了Vue中nprogress頁(yè)面加載進(jìn)度條的方法實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11vue 實(shí)現(xiàn)的樹(shù)形菜的實(shí)例代碼
這篇文章主要介紹了vue 實(shí)現(xiàn)的樹(shù)形菜單,需要的朋友可以參考下2018-03-03vue 監(jiān)聽(tīng)input輸入事件(oninput)的示例代碼支持模糊查詢
這篇文章主要介紹了vue 監(jiān)聽(tīng)input輸入事件(oninput)支持模糊查詢,比如說(shuō)表格模糊查詢,實(shí)現(xiàn)一邊輸入,一邊過(guò)濾數(shù)據(jù),本文通過(guò)示例代碼給大家詳細(xì)講解,需要的朋友可以參考下2023-02-02詳解關(guān)于Vue版本不匹配問(wèn)題(Vue packages version mismatch)
這篇文章主要介紹了詳解關(guān)于Vue版本不匹配問(wèn)題(Vue packages version mismatch),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09VUE+Canvas實(shí)現(xiàn)財(cái)神爺接元寶小游戲
這篇文章主要介紹了VUE+Canvas實(shí)現(xiàn)財(cái)神爺接元寶小游戲,需要的朋友可以參考下本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2021-04-04Vue3 computed初始化獲取設(shè)置值實(shí)現(xiàn)示例
這篇文章主要為大家介紹了Vue3 computed初始化以及獲取值設(shè)置值實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10