vue自定义可选时间的日历组件

本文实例为大家分享了vue自定义可选时间日历组件的具体代码，供大家参考，具体内容如下

1、过去时间不可选择2、可自定义不可选时间3、本月默认展示当天，其他月展示第一天，若为不可选时间，往后顺延

-------下面开始表演-----------

**首先，画出日历页面布局，参照win10系统日历布局*6行7列，为何如此，请自行理解…*本人也是“偷窥”来的

beginDay是当前月第一天的周几，prevMdays是上个月总天数，nowMdays是当月总天数，这样就实现了日历的展示效果，标签中绑入一些可能会用到的数据 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>

—接下来…

所用到的数据：

*active-day是高亮的那一天即选中日期，curDate控制选中哪一天，这里默认当天，开放一个props数据timeArry,允许传入一些自定义日期作为不可选，点击的日期中绑定的dates存在于数组中则返回，可选择的情况下通过$emit将选择的结果通过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('不存在数值，停止，日期停留在' + i); ndate = i; break; }}console.log(ndate, `${this.year}/${this.month}/${ndate}`);//用切换到的月和本日相比较，未来月默认选中1号，当月选中当天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); } } },

父组件中调用

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

这样的日历就完成了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。