日期選擇組件（DatePicker）的實現

1、效果圖

日期選擇組件大概長這樣：

從效果圖能夠看出，日期選擇組件由兩部分組成：日曆表格和頂部操做欄。

2、日曆表格

日期選擇組件的核心主體是日曆表格：

能夠將日曆表格表示成一個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’]

由日曆數組生成日曆表格

獲得了日曆數組，要生成日曆表格就是垂手可得的事情。

具體效果以下：

增長日期點擊操做

點擊某個日期能夠輸出該日期。

3、頂部操做欄

主要包括切換上一年/上一月/下一月/下一年這幾個操做和當前年月的展現。

獲取下一月的日曆數組

只須要把getCalendarArr中的date參數變成下個月的日期就好，moment中有一個函數能夠實現：
date.add(1, ‘months’)
同理上一月的就是：date.add(-1, ‘months’)
同理下一年的就是：date.add(1, ‘years’)

組件源碼連接：
日期選擇組件