这是一个很常见的日期选择级联组件,先看下效果:
View Code
<
div
>
< p >
< input type ="text" id ="birthday" name ="birthday" value ="2008/2/29" />
</ p >
</ div >
< script src ="http://files.cnblogs.com/akakingback/datacascade-origin.js" ></ script >
< script >
window.onload = function () {
var date = new DateCascade( ' birthday ' );
};
</ script >
< p >
< input type ="text" id ="birthday" name ="birthday" value ="2008/2/29" />
</ p >
</ div >
< script src ="http://files.cnblogs.com/akakingback/datacascade-origin.js" ></ script >
< script >
window.onload = function () {
var date = new DateCascade( ' birthday ' );
};
</ script >
这个组件是基于Cubee里的相同组件Y.DateCascade改写的,由于原来的组件代码依赖于YUI过于繁琐及存在着一些bug,于是用原生js重构了一遍。以下是重构的过程的一些思路。
一、分析组件的结构及行为
其实这个组件的结构及行为很简单,不外乎是年月日间互相联动,动态改变select里的option个数及其值。
- 日期需要有一个上限及下限,比如从1900年1月1日开始,最多能选到2012年12月21日;
- 能根据不同的月份显示不同的天数,比如1月有31天可选,闰年的2月则只有29天可选等;
- 可以手动设定其默认选中的值;
- 最后一个特殊的地方,依赖一个input的文本框(业务需要),当JS失效时可以实现平稳退化,手动输入日期(当然可以不依赖这个,直接将select的功能抽取出来)。
二、配置参数
根据上边的结构分析,我们很容易想到组件的配置参数:
- dateStart:日期的下限,可选,默认为1900/01/01;
- dateEnd:日期的上限,可选,默认为当天;
- dateDefault:初始化时默认选中的日期,可选,可以为input里的日期值;
- id:input的id,js将会将select动态加到input节点的后面。
组件的使用方法如下:
var date = new DateCascade(id, {
dateStart: xxxx/xx/xx,
dateEnd: xxxx/xx/xx,
dateDefault: xxxx/xx/xx
});
三、对外提供的接口
师兄说过,开发一个组件,先想好其接口方法,再思考实现其功能的逻辑方法。这个组件提供了一些常用的方法:
- render:渲染结构,这个方法在初始化init的时候调用了一次,后面可以多次调用更改其参数重新渲染结构(不影响之前绑定过的事件);
//上下限均为默认值,初始化时已经调用过一次render方法 var dt = new DateCascade('birthday',{}); //重新设置上下限及默认选中值 dt.render({ dateStart: '1930/01/01', dateEnd: '2012/12/21', dateDefault: '1989/11/05' });
- renderYear,renderMonth,renderDay:分别渲染年月日的select结构;
- setNewDate:设置新的选中日期,参数形式有两种:
dt.setNewDate('2011/01/20');// 传进Date值 dt.setNewDate('2011', '01', '20'); //按年月日传进参数,主要考虑到传进的年月日可能有空值
- setNewYear,setNewMonth,setNewDay:分别设置新的年月日;
四、逻辑的实现
实现逻辑的思路很简单:知道年月日的可选择范围(如1月的可选天数范围为1-31) -> 渲染相应的日期结构 -> 设置选中日期。
所以起始点在于获取年月日的可选择范围:
/**
* 获取年份区间
* @method _getYearRange
* @return {Object}
* @private
*/
_getYearRange: function(){
var that = this;
return {
min: that._dsYear,
max: that._deYear
};
},
/**
* 获取月份区间
* @method _getMonthRange
* @param y {Number}
* @return {Object}
* @private
*/
_getMonthRange: function(y){
var that = this, min = 1, max = 12;
if (y == that._dsYear) {
min = that._dsMonth;
}
if (y == that._deYear) {
max = that._deMonth;
}
return {
min: min,
max: max
};
},
/**
* 获取天数区间
* @method _getMonthRange
* @param y {Number}
* @param m {Number}
* @return {Object}
* @private
*/
_getDayRange: function(y, m){
var that = this, min = 1, max = 31;
if (m) {
if (m != 2) {
max = that._dayInMonth[m - 1];
}
else {
max = that._isLeapYear(y) ? 29 : 28;
}
if (y == that._dsYear && m == that._dsMonth) {
min = that._dsDay;
}
if (y == that._deYear && m == that._deMonth) {
max = that._deDay;
}
}
return {
min: min,
max: max
};
}
然后粗略浏览一下实现整个组件的逻辑方法:(细节请看
这里)
var DateCascade = function(){
//构造函数
function DateCascade(){
this._init.apply(this, arguments);
}
//函数原型
DateCascade.prototype = {
constructor: DateCascade,
_init: function(id, config){
//初始化
},
_buildParam: function(config){
//设置参数
},
_bindEvent: function(){
//绑定change事件
},
render: function(config){
//渲染结构
},
_isLeapYear: function(y){
//是否是闰年
},
_isDate: function(d){
//检查是否是正确的Date格式
},
_checkDate: function(date){
//是否是正确的Date或可形成Date的字符串
},
setNewDate: function(/*y, m, d*/) {
//设置新日期
},
setNewYear: function(y, l){
//设置新年份
},
setNewMonth: function(m, l){
//设置新月份
},
setNewDay: function(d){
//设置新天数
},
renderYear: function(){
//渲染年份
},
renderMonth: function(y){
//渲染月份
},
renderDay: function(y, m){
//渲染天数
},
_getYearRange: function(){
//获取年份区间
},
_getMonthRange: function(y){
//获取月份区间
},
_getDayRange: function(y, m){
//获取天数区间
}
};
return DateCascade;
}();
五、其他
其他的一些细节及应该注意的地方
- render年月日结构时使用原生的select.add(new Option(text, value), undefined)的形式添加选项,速度快(原来的组件使用YUI方法添加的,IE6下会出现渲染延迟的bug);
- 将日期值转成数值时要用parseInt(v, 10),别忘了后面的参数10,因为如果v是以0开头的数最后会转成八进制数,而日期经常会出现以0开头的数;
- 选中值的时候可以直接使用select.value = v的形式,而不用一个个option的匹配;
- 用3的方法选值,如果选项里没有对应的值,不同浏览器的处理不一样,除IE外的浏览器会默认选中第一个选项,而IE不会选中任何值,因此要hack一下;
- 添加了getSelectedDate(取得选中日期的值)和updateInput(更新input里的值)的方法;
- 没有设置回调函数的功能(个人觉得没必要)