el-date-picker 如何限制選擇六個(gè)月內(nèi)的日期
效果如圖:
代碼:
<el-date-picker v-model="serchTimes" type="daterange" size="small" start-placeholder="開(kāi)始時(shí)間" range-separator="~" end-placeholder="結(jié)束時(shí)間" format="yyyy / MM / dd " :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss" @change="changeTime" :default-time="['00:00:00', '23:59:59']" :unlink-panels="true" :validate-event="false" :clearable="false"> </el-date-picker>
主要::picker-options=“pickerOptions” 中的配置:
在onPick配置項(xiàng)中可以獲取到點(diǎn)擊時(shí)的時(shí)間,將其轉(zhuǎn)換為時(shí)間戳后存儲(chǔ)起來(lái)。
在disabledDate配置項(xiàng)中配置只能選擇前后6個(gè)月,這個(gè)配置項(xiàng)的參數(shù)是當(dāng)前的日期,返回參數(shù)要求是Boolean值
其他屬性解析:format="yyyy / MM / dd ": 選擇后顯示的樣式
default-time 是因?yàn)樾枰J(rèn)的時(shí)分秒才添加的
value-format 是點(diǎn)擊確認(rèn)后,change事件中能獲取到的數(shù)據(jù)格式,
:unlink-panels=“true” 是取消兩個(gè)面板之間的聯(lián)動(dòng)滾動(dòng)
:validate-event=“false” 取消點(diǎn)擊時(shí)的校驗(yàn),按需寫
:clearable=“false” 取消清除功能 ,按需寫
data(){ return{ serchTimes: '', selectData: '', pickerOptions: { onPick: ({ maxDate, minDate }) => { this.selectData = maxDate ? maxDate.getTime() : minDate ? minDate.getTime() : '' if (!maxDate || !minDate) { this.serchTimes = '' //只選一個(gè)的時(shí)候,日期置空 } }, }, disabledDate: (time) => { if (this.selectData) { const curDate = this.selectData; const three = 183 * 24 * 3600 * 1000;// 6個(gè)月 const threeMonthsAfter = curDate + three; // 開(kāi)始時(shí)間+6個(gè)月 const threeMonthsBefore = curDate - three; //開(kāi)始時(shí)間-6個(gè)月 return time.getTime() > threeMonthsAfter || time.getTime() < threeMonthsBefore; } } }, } }, methods:{ //選擇時(shí)間后的處理函數(shù)了,可以把數(shù)據(jù)保存后發(fā)送接口等等操作 changeTime() { if (this.serchTimes) { this.reloadForm.begAbsTime = this.serchTimes[0] this.reloadForm.endAbsTime = this.serchTimes[1] } }, }
到此這篇關(guān)于el-date-picker 限制選擇六個(gè)月內(nèi)的日期的文章就介紹到這了,更多相關(guān)el-date-picker 限制選擇日期內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Vue.js中使用iView日期選擇器并設(shè)置開(kāi)始時(shí)間結(jié)束時(shí)間校驗(yàn)功能
- iview日期控件,雙向綁定日期格式的方法
- ElementUI 詳細(xì)分析DatePicker 日期選擇器實(shí)戰(zhàn)
- element的el-date-picker組件實(shí)現(xiàn)只顯示年月日時(shí)分效果(不顯示秒)
- 關(guān)于ELement?UI時(shí)間控件el-date-picker誤差8小時(shí)的問(wèn)題
- element-ui el-select下拉框el-date-picker彈出框定位問(wèn)題解決方案(推薦)
- iview?date-picker?options只可選當(dāng)前日期之前的(當(dāng)前之后的禁用)
相關(guān)文章
不間斷循環(huán)滾動(dòng)效果的實(shí)例代碼(必看篇)
下面小編就為大家?guī)?lái)一篇不間斷循環(huán)滾動(dòng)效果的實(shí)例代碼(必看篇)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10javascript實(shí)現(xiàn)自定義滾動(dòng)條效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)自定義滾動(dòng)條效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08手機(jī)Web APP如何實(shí)現(xiàn)分享多平臺(tái)功能
這篇文章主要介紹了手機(jī)Web APP如何實(shí)現(xiàn)分享多平臺(tái)功能的相關(guān)資料,需要的朋友可以參考下2016-08-08一起來(lái)學(xué)習(xí)JavaScript的BOM操作
這篇文章主要為大家詳細(xì)介紹了JavaScript BOM操作,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2022-03-03解決JS無(wú)法調(diào)用Controller問(wèn)題的方法
這篇文章主要介紹了解決JS無(wú)法調(diào)用Controller問(wèn)題的方法,需要的朋友可以參考下2015-12-12原生js實(shí)現(xiàn)網(wǎng)頁(yè)頂部自動(dòng)下拉/收縮廣告效果
本文主要介紹了原生js實(shí)現(xiàn)網(wǎng)頁(yè)頂部自動(dòng)下拉/收縮廣告效果的實(shí)例代碼。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01