Javascript日期级联组件代码分析及demo

Javascript日期级联组件代码分析及demo2014-06-10 cnblogs 龙恩最近研究下JS日期级联效果感觉还不错，然后看了下kissy也正好有这么一个组件，也看了下源码，写的还不错，通过google最早是在2011年淘宝的虎牙（花名）用原审JS写了一个（貌似据说是从YUI那边重构下的）具体的可以看他的博客园 , 感觉kissy组件源码思路也是和YUI类似所以我今天的基本思路也和他们的一样只是通过自己分析下及用自己的方式包装下。

基本原理

1.传参中有 "年份下拉框dom节点", "月份下拉框dom节点", "天数下拉框dom 节点", "开始日期"，"结束日期","默认日期" 配置项

1.如果开始传参日期为空那么默认是从"1900-01-01"开始

2.如果"结束日期为空" 那么默认结束日期为当前的时间。

3. 如果默认日期为空那么默认日期默认为当前的时间。

2. 月份对应的天数可以直接写死如：_dayInMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] ; 分别为1月份到12月份的各个月份的默认天数，当然还有2月份闰年29天的情况待会在代码中会有判断的。

3. 分别渲染出年份区间，月份区间，及相应的天数。（如果有默认的日期的话且默认日期大于或者等于开始日期且小于或者等于结束日期的话）那么页面加载的时候显示默认日期。

4. 绑定change事件当切换到不同年份的时候月份和天数也要分别渲染出来。

基本配置项如下：

对外提供的方法

1. getDate（）返回当前时间，格式为yyyy-mm-dd

2. getYear（）返回当前的年份

3. getMonth（）返回当前的月份

4. getDay（）返回当前月份中的天数.

JSFiddle demo链接如下：

查看demo 请点击我！

下面代码分析如下：

1. 初始化调用init方法：分别获取开始时间结束时间默认时间的 "年，月，天"。如下代码：

// 开始时间可选 如果为空的话 那么默认开始时间是1900-01-01if（_config.dateStart ！= ""） {this.startDate = {y: new Date（_config.dateStart）.getFullYear（）,m: new Date（_config.dateStart）.getMonth（） + 1,d: new Date（_config.dateStart）.getDate（）};}else {var dateStart = "1900/01/01";this.startDate = {y: new Date（dateStart）.getFullYear（）,m: new Date（dateStart）.getMonth（） + 1,d: new Date（dateStart）.getDate（）};}// dateEnd 默认为空 如果没有传入的话 就取当前的时间if（_config.dateEnd == ""） {this.endDate = {y: new Date（）.getFullYear（）,m: new Date（）.getMonth（） + 1,d: new Date（）.getDate（）};}else {this.endDate = {y: new Date（_config.dateEnd）.getFullYear（）,m: new Date（_config.dateEnd）.getMonth（） + 1,d: new Date（_config.dateEnd）.getDate（）};}// 默认时间可选 如果默认时间为空的话 那么就取当前的时间if（_config.dateDefault ！= ""） {this.defaultDate = {y: new Date（_config.dateDefault）.getFullYear（）,m: new Date（_config.dateDefault）.getMonth（） + 1,d: new Date（_config.dateDefault）.getDate（）};}else {this.defaultDate = {y: new Date（）.getFullYear（）,m: new Date（）.getMonth（） + 1,d: new Date（）.getDate（）};}// 判断时间是否合理if（（Date.parse（self._changeFormat（_config.dateStart）） > Date.parse（self._changeFormat（_config.dateEnd））） || （Date.parse（self._changeFormat（_config.dateDefault）） > Date.parse（self._changeFormat（_config.dateEnd））））{return;}