vue 周日历
需求：1.类似于手机上的周日历，显示周天-周一的。2.周日历能上翻下翻，并自动显示相应的年份和月份。3.点击相应的月份，显示当月第一周的周日历。4.选中某一固定日期，当前日期高亮。最终效果图项目结构如下html代码<!DOCTYPE html><html lang="en"><head>&
·
github地址：xiaoli0510/vue2-calender (github.com)
需求：
1.类似于手机上的周日历，显示周天-周一的。
2.周日历能上翻下翻，并自动显示相应的年份和月份。
3.点击相应的月份，显示当月第一周的周日历。
4.选中某一固定日期，当前日期高亮。
最终效果图
vue.js版本：Vue.js v2.7.16
项目结构如下
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="./css/index.css" />
</head>
<body>
<div class="main" id="main">
<header>
<div class="year">
<span class="pre" @click="sureYear(1)"><</span>
<span>{{ year }} 年 </span>
<span class="pre" @click="sureYear(2)">></span>
</div>
<div class="month">
<div v-for="(item,index) in monthArr" :key="index" :class="{'active':item==month}" @click="sureMonth(item)">
{{ item + 1 }}月
</div>
</div>
</header>
<div class="content">
<span class="pre-week" @click="getData({'value':1})" ><</span>
<span class="next-week" @click="getData({'value':2})">></span>
<div class="wrap">
<div v-for="(item,index) in arr" :key="index" :class="{'active':item.date==activeDay,'cur':item.date==today}" @click="sureDay(item.date)">
{{ item.day }}
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="./js/index.js"></script>
</body>
</html>
index.css代码
.main {
width: 50%;
min-width: 443px;
border: 1px solid #000;
position: absolute;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
.year img {
width: 20px;
vertical-align:middle;
}
.year span {
vertical-align: middle;
}
.pre {
cursor: pointer;
transform: rotate(180deg);
}
.pre-week{
float: left;
margin-top: 15px;
cursor: pointer;
}
.next-week{
float: right;
margin-top: 15px;
cursor: pointer;
}
.month{
height:40px;
}
.month>div {
float:left;
width: 8.3%;
line-height: 40px;
border: 1px solid;
box-sizing: border-box;
cursor:pointer;
}
.month>div.active {
border: 1px solid red;
color: red;
}
.wrap {
margin-left: 20px;
margin-right: 20px;
height: 50px;
}
.wrap>div{
float:left;
width: 14.28%;
border: 1px solid #ece1e1;
box-sizing: border-box;
line-height: 50px;
cursor:pointer;
}
.wrap>div.cur {
border: 1px solid green;
color: green;
}
.wrap>div.active {
border: 1px solid red;
color: red;
}
index.js代码
var vm = new Vue({
el: "#main",
data: {
today: "",
activeDay: "",
year: "",
month: "",
day: "",
count: 0, //前一周后一周点击次数
arr: [], //周日历,
monthArr: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], //月份
sureMonthFlag: false, //是否初始化月份
sureYearFlag: false, //是否初始化年份
selMonth: '',
selYear: '',
},
created: function () {
this.getData();
this.getToday();
},
methods: {
getToday: function () {
var date = new Date();
var year = date.getFullYear(); //年
var month = date.getMonth(); //月 从0开始 0=》1月 1=》2月
var day = date.getDate(); //日
this.today = year + "," + month + "," + day;
},
getData: function (obj) {
var date = new Date();
if (this.sureMonthFlag) {
date = new Date(this.selYear, this.selMonth, 1);
}
if (this.sureYearFlag) {
date = new Date(this.selYear, this.selMonth, 1);
}
if (obj) {
if (obj.value == '1') { //前一周
this.count--;
} else if (obj.value == '2') { //后一周
this.count++;
}
}
var year = date.getFullYear(); //年
var month = date.getMonth(); //月 从0开始 0=》1月 1=》2月
var day = date.getDate(); //日
this.day = day;
var weekDay = date.getDay(); //是本周的第几天
this.getWeek(year, month, day, weekDay);
},
getWeek: function (year, month, day, weekDay) {
this.arr = [];
for (var i = 0; i < 7; i++) {
var temDate = new Date(year, month, day - weekDay + i + this.count * 7);
var temYear = temDate.getFullYear(); //年
var temMonth = temDate.getMonth(); //月 从0开始 0=》1月 1=》2月
var temDay = temDate.getDate(); //日
var temDate = temYear + "," + temMonth + "," + temDay;
var obj = {
"date": temDate,
"year": temYear,
"month": temMonth,
"day": temDay
};
this.arr.push(obj);
}
if (this.sureMonthFlag) {
this.year = this.arr[6].year; //周日历数组的最后一个值的year为当前year
} else {
this.selYear = this.year = this.arr[6].year; //周日历数组的最后一个值的year为当前year
}
if (this.sureMonthFlag) {
this.month = this.arr[6].month; //周日历数组的最后一个值的month为当前month
} else {
this.selMonth = this.month = this.arr[6].month; //周日历数组的最后一个值的month为当前month
}
this.month = this.arr[6].month; //周日历数组的最后一个值的month为当前month
this.day = this.arr[6].day; //周日历数组的最后一个值的day为当前day
},
//确定日期
sureDay: function (value) {
this.activeDay = value;//根据此值去发送请求即可
},
//确定月份
sureMonth: function (item) {
this.count = 0;
this.selMonth = item;
this.sureMonthFlag = true;
this.sureYearFlag = false;
this.selYear = this.year;
this.getData();
},
//确定年份
sureYear: function (value) {
this.count = 0;
this.sureYearFlag = true;
this.sureMonthFlag = false;
this.selMonth = this.month;
if (value == 1) {
this.year--;
} else {
this.year++;
}
this.selYear = this.year;
this.getData();
}
}
})
难点:主要是交互时候的年月日，比如现在是2019，点击6月份，那么默认日期变为2019.6.1，点击count变为0。年份与月份类似。
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献10条内容
所有评论(0)