vue+elementUI实现简单日历功能实现简单日历功能
vue+elementUI简单的实现日历功能，供大家参考，具体内容如下
<div class="calender2">
<div class="date-headers">
<div class="date-header">
<div><el-button type="primary" @click="handlePrev"><i class="el-icon-arrow-left"></i>上一月</el-button></div>
<div>{{ year }}年{{ month }}月{{ day }}日</div>
<div><el-button type="primary" @click="handleNext">下一月<i class="el-icon-arrow-right"></i></el-button></div>
<div><el-button type="primary" icon="el-icon-refresh-left" @click="refresh"></el-button></div>
</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="every-day"
v-for="item in 42"
:key="item"
@click="handleClickDay(item - beginDay)"
>
<div v-if="item - beginDay > 0 && item - beginDay <= curDays" :class="`${year}-${month}-${item - beginDay}` === `${year}-${month}-${day}` ?
'nowDay':''"
>{{ item - beginDay }}</div>
<div class="other-day" v-else-if="item - beginDay <= 0">{{ item - beginDay + prevDays }}</div>
<div class="other-day" v-else>{{ item - beginDay -curDays }}</div>
</div>
</div>
</div>
</div>
## javascript
<script>
export default {
name: "HelloWorld",
data() {
return {
year: null,
month: null,
day: null,
currentDay: null,
currentYearMonthTimes: null,//当前年的月的天数
monthOneDay: null,//一个月中的某一天
curDate: null,
prevDays: null,//上一月天数
}
},
computed: {
curDays() {
return new Date(this.year, this.month, 0).getDate();
},
// 设置该月日期起始值（找到一号是在哪里）
beginDay() {
return new Date(this.year, this.month - 1, 1).getDay();
}
},
created() {
this.getInitDate();
this.currentYearMonthTimes = this.mGetDate(this.year, this.month); //本月天数
this.prevDays = this.mGetDate(this.year, this.month - 1);
this.curDate = `${this.year}-${this.month}-${this.day}`
console.log(this.curDate)
},
methods: {
refresh(){ //强制刷新页面
location. reload()
},
handleClickDay(day){ //点击这一天，绑定点击事件
console.log( '形参传进来的',day)
资源评论
weixin_38501916
- 粉丝: 2
- 资源: 934
