vue自定义可选时间的日历组件
时间：2022-05-01 09:15:04 | 栏目：vue | 点击：次
本文实例为大家分享了vue自定义可选时间日历组件的具体代码，供大家参考，具体内容如下
日历功能：
1、过去时间不可选择
2、可自定义不可选时间
3、本月默认展示当天，其他月展示第一天，若为不可选时间，往后顺延
效果图：
-------下面开始表演-----------
**首先，画出日历页面布局，参照win10系统日历布局*6行7列，为何如此，请自行理解…*本人也是“偷窥”来的
beginDay是当前月第一天的周几，prevMdays是上个月总天数，nowMdays是当月总天数，这样就实现了日历的展示效果，标签中绑入一些可能会用到的数据 data-dates等
<div class="dateContent-body-day" v-for="item in 42" :key="item">
<div
v-if="item - beginDay > 0 && item - beginDay <= nowMdays"
:class="{
'active-day': `${year}/${month}/${item - beginDay}` == curDate
}"
@click="dayHandler"
:data-year="year"
:data-month="month"
:data-day="item - beginDay"
:data-dates="year + '/' + month + '/' + (item - beginDay)"
>
{{ item - beginDay }}
</div>
<div class="other-day" v-else-if="item - beginDay <= 0">
{{ item - beginDay + prevMdays }}
</div>
<div class="other-day" 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有没有被滥用
```javascript
watch: {
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
},
这样的日历就完成了。