项目需求,根据当前时间,显示本周所有日期,点击左右按钮切换上下周。
<ul class="days">
<li @click="weekPre" class="prev-btn">
<span class="hidden-sm-and-down"><i class="el-icon-arrow-left"></i></span>
</li>
<li
class="date-item"
@click="pick(day, index)"
v-for="(day, index) in days"
:key="index"
:class="{'active' :show==index}"
>
<div style="width:100%;height: 100%;background-color: #17C6AC;color:#fff;" v-if="day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()">
<!--天-->
<span class="hidden-sm-and-down">{{ day | dateFormat }}</span>
<p>({{day | getWeekFormat}})</p>
</div>
<div style="width:100%;height: 100%;" v-else>
<!--天-->
<span class="hidden-sm-and-down">{{ day | dateFormat }}</span>
<p>({{day | getWeekFormat}})</p>
</div>
</li>
<li @click="weekNext" class="next-btn">
<span class="hidden-sm-and-down"><i class="el-icon-arrow-right"></i></span>
</li>
</ul>
.days {
display: flex;
justify-content: space-around;
}
.weeks ul li p {
margin: 0 !important ;
display: inline-block;
}
.weeks ul li {
width: 180px;
height: 44px;
text-align: center;
line-height: 44px;
cursor: pointer;
}
.weeks ul {
padding: 0;
}
.prev-btn {
margin-right: 35px;
}
.next-btn {
margin-left: 35px;
}
ps:样式不对的话自己改改。
##data中定义
currentYear: 1970, // 年份
currentMonth: 1, // 月份
currentDay: 1, // 日期
currentWeek: 1, // 星期
days: [],
##date下面定义一个周的过滤器
filters: {
dateFormat(date) {
return moment(date).format("MM.DD");
},
getWeekFormat(date) {
const weeksObj = {
1: "周一",
2: "周二",
3: "周三",
4: "周四",
5: "周五",
6: "周六",
7: "周日",
};
let weekNumber = moment(date).isoWeekday();
return weeksObj[weekNumber];
}
},
## 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())
// console.log('d: ', d);
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);
// console.log('d1: ', 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);
},
开发时要把它弄为公共方法来使用比较好!