基于Vue实现支持按周切换的日历
程序员文章站
2022-11-25 09:29:44
基于vue的日历小功能，可根据实际开发情况按每年、每月、每周、进行切换，具体内容如下
基于vue的日历小功能，可根据实际开发情况按每年、每月、每周、进行切换，具体内容如下
<template>
<div class="date">
<!-- 年份 月份 -->
<div class="month">
<p>{{ currentyear }}年{{ currentmonth }}月</p>
</div>
<!-- 星期 -->
<ul class="weekdays">
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
<li>日</li>
</ul>
<!-- 日期 -->
<ul class="days">
<li @click="pick(day)" v-for="(day, index) in days" :key="index">
<!--本月-->
<span v-if="day.getmonth()+1 != currentmonth" class="other-month">{{ day.getdate() }}</span>
<span v-else>
<!--今天-->
<span v-if="day.getfullyear() == new date().getfullyear() && day.getmonth() == new date().getmonth() && day.getdate() == new date().getdate()" class="active">{{ day.getdate() }}</span>
<span v-else>{{ day.getdate() }}</span>
</span>
</li>
</ul>
</div>
</template>
js部分：目前默认显示一周，可根据实际情况更改
<script>
export default {
name: 'date',
data () {
return {
currentyear: 1970, // 年份
currentmonth: 1, // 月份
currentday: 1, // 日期
currentweek: 1, // 星期
days: [],
}
},
mounted () {
},
created () {
this.initdata(null)
},
methods: {
formatdate (year, month, day) {
const y = year
let m = month
if (m < 10) m = `0${m}`
let d = day
if (d < 10) d = `0${d}`
return `${y}-${m}-${d}`
},
initdata (cur) {
let date = ''
if (cur) {
date = new date(cur)
} else {
date = new date()
}
this.currentday = date.getdate() // 今日日期 几号
this.currentyear = date.getfullyear() // 当前年份
this.currentmonth = date.getmonth() + 1 // 当前月份
this.currentweek = date.getday() // 1...6,0 // 星期几
if (this.currentweek === 0) {
this.currentweek = 7
}
const str = this.formatdate(this.currentyear, this.currentmonth, this.currentday)// 今日日期 年-月-日
this.days.length = 0
// 今天是周日，放在第一行第7个位置，前面6个 这里默认显示一周，如果需要显示一个月，则第二个循环为 i<= 35- this.currentweek
/* eslint-disabled */
for (let i = this.currentweek - 1; i >= 0; i -= 1) {
const d = new date(str)
d.setdate(d.getdate() - i)
// console.log(y:" + d.getdate())
this.days.push(d)
}
for (let i = 1; i <= 7 - this.currentweek; i += 1) {
const d = new date(str)
d.setdate(d.getdate() + i)
this.days.push(d)
}
},
// 上个星期
weekpre () {
const d = this.days[0] // 如果当期日期是7号或者小于7号
d.setdate(d.getdate() - 7)
this.initdata(d)
},
// 下个星期
weeknext () {
const d = this.days[6] // 如果当期日期是7号或者小于7号
d.setdate(d.getdate() + 7)
this.initdata(d)
},
// 上一個月 传入当前年份和月份
pickpre (year, month) {
const d = new date(this.formatdate(year, month, 1))
d.setdate(0)
this.initdata(this.formatdate(d.getfullyear(), d.getmonth() + 1, 1))
},
// 下一個月 传入当前年份和月份
picknext (year, month) {
const d = new date(this.formatdate(year, month, 1))
d.setdate(35)
this.initdata(this.formatdate(d.getfullyear(), d.getmonth() + 1, 1))
},
// 当前选择日期
pick (date) {
alert(this.formatdate(date.getfullyear(), date.getmonth() + 1, date.getdate()))
},
},
}
</script>
<style lang="scss">
@import "~base";
.date {
height: px2rem(180);
color: #333;
.month {
font-size: px2rem(24);
text-align: center;
margin-top: px2rem(20);
}
.weekdays {
display: flex;
font-size: px2rem(28);
margin-top: px2rem(20);
li {
flex: 1;
text-align: center;
}
}
.days {
display: flex;
li {
flex: 1;
font-size: px2rem(30);
text-align: center;
margin-top: px2rem(10);
line-height: px2rem(60);
.active {
display: inline-block;
width: px2rem(60);
height: px2rem(60);
color: #fff;
border-radius: 50%;
background-color: #fa6854;
}
.other-month {
color: #e4393c;
}
}
}
}
</style>
相关参考链接：vue.js创建calendar日历效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。