之前項目中有用到日歷控件，當時由于時間問題，是在網(wǎng)上找到一個demo，然后二次開發(fā)的，從那時就想著自己寫一個日歷控件。這篇文章說明日歷數(shù)據(jù)的處理，去除月份天數(shù)判斷以及是否閏年判斷。 

設計（以最常用的按月份的日歷）

日歷其實大家都很熟悉，一切的設計都是從功能出發(fā)，這是根本。日歷的功能分為兩大塊。

功能點

首先思考日歷的核心問題

如何獲取當前日期的年份以及月份

/** * 獲取日歷header內(nèi)容 格式為：****年 **月 * @param {*} date */export const getHeaderContent = function (date) { let _date = new Date(date)  return dateFormat(_date, 'yyyy年 MM月')}

如何獲取當前月份需要顯示的42條數(shù)據(jù)（6*7），這42條數(shù)據(jù)是什么呢？

這個問題的核心是：當前月份顯示的42條數(shù)據(jù)的第一天是哪一天？

這個問題的解決思路還要從上面的設計說起，上面提到日歷主題的行數(shù)時，說到“假設當前月的第一天為上一月最后一周的最后一天”，那么42條數(shù)據(jù)顯示的內(nèi)容的第一條數(shù)據(jù)還要根據(jù)當前月的第一天是第一天所在周的第幾天。

舉例：2019-02-01

2月的第一天，星期五，所以當前月日歷的第一天為2019-02-01 - 5

var date = new Date()date.setDate(date.getDate() - date.getDay() + 1) // 獲取當前月的第一天為2019-01-28

這里有一問題是什么呢？

date.getDate()的值為0 - 6（0為周日，如果你的日歷也是將周日放在日歷的第一天，沒什么問題，可是在中國是將周日放在最后一天的），這也就意味著前面的實現(xiàn)還需要考慮日歷的放置順序，因為日歷是按照普通的周一到周日，還是周日到周一，我們獲取的當月日歷的第一天是不同的。所以上面的代碼還要依賴于日歷的排放順序。

這里的排放順序?qū)⑹侨諝v組件的第一個可被調(diào)用者控制的參數(shù)。這里我的設想是將該參數(shù)的傳入值與date.getDay()匹配。

所以上面的公式為

date.setDate(date.getDate() - date.getDay() + x)

但是這里的x值加了之后的日期如果大于當前月份的第一天，那就需要將當前得到的日期數(shù)值再減去7天，這個原因就不用說明了吧。