<template>
<!-- 日历组件 -->
<div class="calender">
<div class="date-header">
<!-- 切换日期按钮 -->
<div class="btn-month">
<div>
<button @click="handleYear(-1)"><<</button>
<button @click="handlePrev"><</button>
</div>
<div>
<button @click="handleNext">></button>
<button @click="handleYear(1)">>></button>
</div>
</div>
<div class="show-date">{{ year }}年{{ month }}月{{ day }}日</div>
</div>
<div class="date-content">
<div class="week-header">
<div
v-for="item in ['日', '一', '二', '三', '四', '五', '六']"
:key="item"
>
{{ item }}
</div>
</div>
<div class="week-day">
<div :class="arr.indexOf(item-beginDay())!=-1?'every-day dian':'every-day' " v-for="item in 42" :key="item" >
<!-- 当月 -->
<div
:class="active == item - beginDay() ? 'active' : '' "
v-if="item - beginDay() > 0 && item - beginDay() <= prevDays(0)"
@click="chack(item - beginDay())"
>
{{ item - beginDay() }}
</div>
<!-- 上月 -->
<div class="other-day" v-else-if="item - beginDay() <= 0" @click="handlePrev">
{{ item - beginDay() + prevDays(1) }}
</div>
<!-- 下月 -->
<div class="other-day" v-else @click="handleNext">
{{ item - beginDay() - prevDays(0) }}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ["data"],
data() {
return {
arr:[1,2,3],
active: null,
year: null,
month: null,
day: null,
curDate: null,
nextDay: 0,
};
},
created() {
this.getInitDate();
console.log(this.prevDays());
},
methods: {
getInitDate() {
const date = new Date();
this.year = date.getFullYear();
this.month = date.getUTCMonth() + 1;
this.day = date.getDate();
this.curDate = `${this.year}-${this.month}-${this.day}`;
},
//获取1号开始位置
beginDay() {
return new Date(this.year, this.month - 1, 1).getDay();
},
// 获取某月天数
prevDays(e) {
return new Date(this.year, this.month - e, 0).getDate();
},
handlePrev() {
this.active = null;
if (this.month == 1) {
this.month = 12;
this.year--;
} else {
this.month--;
}
},
handleNext() {
this.active = null;
if (this.month == 12) {
this.month = 1;
this.year++;
} else {
this.month++;
}
},
handleYear(e) {
this.active = null;
this.year += e;
},
chack(e) {
console.log(e);
//车辆轨迹模拟数据
let carList=["113.332321,23.136581","113.335648,23.137974","113.340012,23.138865"]
this.$store.commit('chack_carTrajectory',carList)
this.active = e;
},
},
};
</script>