一、效果图

日期选择组件大概长这样：

从效果图可以看出，日期选择组件由两部分组成：日历表格和顶部操作栏。

二、日历表格

日期选择组件的核心主体是日历表格：

可以将日历表格表示成一个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’)

组件源码链接：