由于项目的需求,需要实现一个只显示一周日期的日历组件,点击下一周或上一周按钮显示上/下一周的日期。这里只实现了js的部分,界面部分大家可以自己去实现一下。
具体实现代码如下:
export default class Calendar {
constructor () {
this.currentWeekFirst = null
}
/**
* 获取以一周为单位得日期
* @param {*} date 时间戳
*/
_setDate (date) {
let weekList = [] // 周列表
let passed = date.getDay() - 1
let _date = this._addDate(date, passed * -1) // 获取周一的时间
this.currentWeekFirst = new Date(_date)
for (let i = 0; i < 7; i++) {
let _ = this.format(i === 0 ? _date : this._addDate(_date, 1))
weekList.push(_)
}
return weekList
}
/**
* 增加时间
* @param {*} date 时间戳
* @param {*} n 天数
*/
_addDate (date, n) {
return new Date(date.setDate(date.getDate() + n))
}
/**
* 获取本周日期
* @param {*} date 时间戳
*/
ThisWeek (date) {
return this._setDate(date)
}
/