本文實例為大家分享了vue自定義可選時間日歷組件的具體代碼，供大家參考，具體內(nèi)容如下

1、過去時間不可選擇2、可自定義不可選時間3、本月默認展示當(dāng)天，其他月展示第一天，若為不可選時間，往后順延

-------下面開始表演-----------

**首先，畫出日歷頁面布局，參照win10系統(tǒng)日歷布局*6行7列，為何如此，請自行理解…*本人也是“偷窺”來的

beginDay是當(dāng)前月第一天的周幾，prevMdays是上個月總天數(shù)，nowMdays是當(dāng)月總天數(shù)，這樣就實現(xiàn)了日歷的展示效果，標(biāo)簽中綁入一些可能會用到的數(shù)據(jù) data-dates等

<div v-for='item in 42' :key='item'> <div v-if='item - beginDay > 0 && item - beginDay <= nowMdays' : @click='dayHandler' :data-year='year' :data-month='month' :data-day='item - beginDay' :data-dates='year + ’/’ + month + ’/’ + (item - beginDay)' > {{ item - beginDay }} </div> <div v-else-if='item - beginDay <= 0'> {{ item - beginDay + prevMdays }} </div> <div v-else>{{ item - beginDay - nowMdays }}</div></div>

—接下來…

所用到的數(shù)據(jù)：

*active-day是高亮的那一天即選中日期，curDate控制選中哪一天，這里默認當(dāng)天，開放一個props數(shù)據(jù)timeArry,允許傳入一些自定義日期作為不可選，點擊的日期中綁定的dates存在于數(shù)組中則返回，可選擇的情況下通過$emit將選擇的結(jié)果通過chooseDate事件暴露出去。

//點擊切換日 dayHandler(e) { console.log(e); var daNum = e.target.dataset; if (this.cantTime.indexOf(daNum.dates) > -1) {this.$toast('非開放日期，不可選取');return; } if (`${daNum.year}/${daNum.month}/${daNum.day}` >=`${new Date().getFullYear()}/${new Date().getMonth() + 1}/${new Date().getDate()}` ) {this.date = e.target.dataset.day;this.$emit( 'chooseDate', this.year + '/' + this.month + '/' + this.date); } else {this.$toast('過去時間不可選取'); } }, //切換下月``nextMonth() { if (this.month == 12) {this.month = 1;this.year++; } else {this.month++; }},

對切換月、日都要進行觀測，重點在于觀測月份變化，也不知道watch有沒有被濫用

```javascriptwatch: { date(val, oldval) { if (val) {this.curDate = `${this.year}/${this.month}/${this.date}`; } }, month(val, oldval) { if (val) {var ndate;for (var i = 1; i <= 31; i++) { console.log(`${this.year}/${this.month}/${i}`); if (this.cantTime.indexOf(`${this.year}/${this.month}/${i}`) < 0) { console.log('不存在數(shù)值，停止，日期停留在' + i); ndate = i; break; }}console.log(ndate, `${this.year}/${this.month}/${ndate}`);//用切換到的月和本日相比較，未來月默認選中1號，當(dāng)月選中當(dāng)天if ( `${this.year}/${this.month}/1` > `${new Date().getFullYear()}/${new Date().getMonth() + 1}/${new Date().getDate()}`) { this.curDate = `${this.year}/${this.month}/${ndate}`; this.date = ndate;} else { for (var i = new Date().getDate(); i <= 31; i++) { console.log(2`${this.year}/${this.month}/${i}`); if (this.cantTime.indexOf(`${this.year}/${this.month}/${i}`) < 0) { this.curDate = `${new Date().getFullYear()}/${new Date().getMonth() + 1}/${i}`; this.date = i; break; } }}this.$emit( 'chooseDate', this.year + '/' + this.month + '/' + this.date); } } },

父組件中調(diào)用

<calendar :timeArry='timeArray' @chooseDate='chooseHandler'></calendar>import { calendar ,alertBox} from ’@/components/index.js’;export default { components:{calendar,alertBox },

這樣的日歷就完成了。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。