日期选择组件（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’)

组件源码连接：
日期选择组件