0:周日
1:周一
…..
5:周五
6:周六
所以上面的公式为
date.setDate(date.getDate() - date.getDay() + x)但是这里的x值加了之后的日期如果大于当前月份的第一天,那就需要将当前得到的日期数值再减去7天,这个原因就不用说明了吧。
/**
* 获取当前月日历的第一天
* @param {*} date
*/
export const getFirstDayOfCalendar = function (date, weekLabelIndex) {
let _date = new Date(date)
_date = new Date(_date.setDate(_date.getDate() - _date.getDay() + weekLabelIndex))
// 如果当前日期大于当前月第一天,则需要减去7天
if (_date > date) {
_date = new Date(_date.setDate(_date.getDate() - 7))
} return _date
}
接下来就好做了,只需要在当前的日期加上加上1,每次得到下一天的日期。
左右切换月份如何设定
上面设计都是以今天为计算初始值,左右切换的初始值如何设计呢?
第一反应是将当前的日期的月份进行加减1,这样是不行的,因为如果今天是31号,那么碰到下个月只有30的时候,这样就会碰到点击下月,直接切换了两个月。更别说2月这个月份天数不固定的月份。所以这里又是一个问题了。
我的解决思路是:月份点击切换的时候,初始计算值设计为当前月的第一天。
/**
* 以传入参数作为基准获取下个月的第一天日期
* @param {*} firstDayOfCurrentMonth
*/
export const getFirstDayOfNextMonth = function (firstDayOfCurrentMonth) {
return new Date(firstDayOfCurrentMonth.getFullYear(), firstDayOfCurrentMonth.getMonth() + 1, 1)
}/**
* 以传入参数作为基准获取上个月的第一天日期
* @param {*} firstDayOfCurrentMonth
*/
export const getFirstDayOfPrevMonth = function (firstDayOfCurrentMonth) {
return new Date(firstDayOfCurrentMonth.getFullYear(), firstDayOfCurrentMonth.getMonth() - 1, 1)
}
左右切换月份数据传递方式(观察者模式)
因为对于日历组件本身来说,header和body是属于同一个父组件的同级组件,数据传递可以依赖于父组件进行传递,这里我使用的是观察者模式实现。
引入观察者模式代码:
/*
* Subject
* 内部创建了三个方法,内部维护了一个ObserverList。
*/// contructor function
export const Subject = function () {
this.observers = new ObserverList()
}
// addObserver: 调用内部维护的ObserverList的add方法
Subject.prototype.addObserver = function (observer) {
this.observers.add(observer)
}
// removeObserver: 调用内部维护的ObserverList的removeat方法










