js实现日期控件

前言

最近花了点时间写了个日期控件，首先说说写日期控件的初衷，有两点：

• 第一点是没有写过对于日期的生成不甚了解
• 工作中使用框架的日期控件，但是想要自己实现下

该日期控件主要是学习使用，功能不多，支持输出天以及日期范围的选择。

实现思路

日期控件实现了单日期以及日期范围的功能，单日期实现效果如下图：

日期范围实现效果图如下：

下面主要说说主要的实现思路，首先说说面板日期的生成，日期面板如下图：

日期面板显示是日-六的顺序，首先第一列显示星期日。
日期的生成规则如下：

• 若生成的当月的第一天是周日则第一行日期都是上个月的
• 若当月的第一天是周一到周六，则从第一行开始，对应的指定的列

不同的日期控件的生成规则有时会不同，比如win7系统的日期就是我上面的生成规则，win10系统日期生成是周日是最后一列等。

本次日期控件实现主要涉及6个对象，对象说明如下：

SDate：该对象表示日期控件，唯一，对外提供render函数，用于用户配置
Section：区域对象，用于控制整个日期控件的显示与隐藏
Panel：日期对象，表示日期
Nav：区域顶部对象，切换年月的区域
Content：日期内容区域对象
Cell：单元格对象，表示日期的天对应的对应

Cell对象对应的是天，主要的属性如下：

line：行
row：列
value：具体天
isCurrentMonth：是否在当前月
isToday：是否是今天
isActive：是否可被选择
isInRange：是否在选择的日期范围内，多选需要用到
isDisabled：可选范围支持
note：注释信息

Nav对象对应的顶部区域，主要的属性有：

nav：顶部区域节点对象
yearLeftNode：上一年节点对象
yearRightNode：下一年节点对象
monthLeftNode：上一个月节点对象
monthRightNode：下一个月节点对象
yearNode：年显示节点对象
monthNode：月显示节点对象

Content对象的属性如下：

cells：所有cell对象
content：内容区域节点对象

Panel对象的属性如下：

id：唯一标识
initDate：当前面板渲染的时间点
panelNode：dom对象
navArea：Nav对象
contentArea：Content对象

Section对象的属性如下：

status：面板当前显示状态
panels：panel面板对象集合
isRange：是否是日期范围选择
sectionNode：当前section对应的DOM

单纯只考虑日期列表地生成的核心代码如下：

for (let le = 0; le < line; le++) {
	let rows = [];
	for (let rw = 0; rw < row; rw++) {
		// 第一行：处理当月第一天周日与其他的情况
		if (le === 0) {
			dayInWeek === 0 ? 
			(function() {
				rows.push(new Cell(le, rw, 
					daysOfPrevMonth - row + rw + 1, -1));
			}()) : (function() {
				rw < dayInWeek ? rows.push(new Cell(le, rw, daysOfPrevMonth - dayInWeek + rw + 1, -1)) 
				: rows.push(new Cell(le, rw, rw - dayInWeek + 1));
			}());
			// 第二行开始值确定
			if (rw === row - 1) {
				let endValue = rows[rows.length - 1].value;
				lineStart = endValue + 1 > daysOfPrevMonth ? daysOfPrevMonth - endValue : endValue;
			}
		} else  {
			// 其他行
			lineStart += 1;
			if (lineStart <= daysofCurrentMonth) {
				rows.push(new Cell(le, rw, lineStart));
			} else {
				rows.push(new Cell(le, rw, lineStart - daysofCurrentMonth, 1));
			}
		}
	}

结束语

本日期控件目前已重构梳理之前的处理逻辑，代码结构以及结构更加清晰，最新的代码已上传到GitHub上，同时在关键点增加详细注释，新增面板展开动画，修复之前潜在Bug。