一、效果圖
日期選擇組件大概長這樣：
從效果圖可以看出，日期選擇組件由兩部分組成：日歷表格和頂部操作欄。
二、日歷表格
日期選擇組件的核心主體是日歷表格：
可以將日歷表格表示成一個7✖️*的二維數組，數組中的每一項為一個日期。
一個月有28/29/30/31天，一個星期有7天，最極端的情況，日歷數組是一個7✖️4的二維數組，大部分月份都是7✖️5或者7✖️6的二維數組。
不妨假設數組的列是6，非當月的日期用上一月/下一月的日期代替。
從今天出發，獲取今天所在月的日歷數組。
獲取指定日期所在月的日歷數組
1.要獲取當前月的日歷數組，只需要獲取每一周的周數組，按照之前的假設一共6周，循環6次，將每一周的周數組合在一起就是月數組。
2.獲取第一周的周數組，需要先獲取今天所在月的第一天firstDayOfMonth，這樣就可以知道第一周的第一天，一周7天，循環7次，就得到第一周的周數組。
3.同理可得之后6周的周數組。
4.最終得到當月的日歷數組，具體算法如下：
通過以上方法，給定任意一個日期，可以得到當月的日歷數組。
比如：getCalendarArr(‘2018-09-27’)得到的是[[‘2018-08-26’, ‘2018-08-27’, …, ‘2018-09-01’], …, [‘2018-09-30’, …, ‘2018-10-06’]]
其中用到的獲取周數組的代碼如下：
給定任意日期，可以獲取其第num周（對於月日歷來說一共6周）的周數組。
比如：getWeekArr(‘2018-09-27’, 0)得到的是[‘2018-09-23’, ‘2018-09-24’, …, ‘2018-09-29’]
而getWeekArr(‘2018-09-27’, 1)得到的是[‘2018-09-30’, ‘2018-10-01’, …, ‘2018-10-06’]
由日歷數組生成日歷表格
得到了日歷數組，要生成日歷表格就是輕而易舉的事情。
具體效果如下：
增加日期點擊操作
點擊某個日期可以輸出該日期。
三、頂部操作欄
主要包括切換上一年/上一月/下一月/下一年這幾個操作和當前年月的展示。
獲取下一月的日歷數組
只需要把getCalendarArr中的date參數變成下個月的日期就好，moment中有一個函數可以實現：
date.add(1, ‘months’)
同理上一月的就是：date.add(-1, ‘months’)
同理下一年的就是：date.add(1, ‘years’)
組件源碼鏈接：
日期選擇組件