跟我做：Javascript 下的日历控件（Calendar）

    右侧是该控件的示范应用，朋友们可点击试用: 下载源码(20080824)

    曾经，我发布过《几个Javascript类》，得到部分朋友的支持；有道是，授之予鱼，不如授之予渔。同时结合朋友们的评价，我对该日历控件做了兼容性检查，已经“基本”支持火狐浏览器应用了；遗留一个小问题，火狐下面“日”提取有问题，不知道有兴趣的朋友能不能在读完本文后自己动手修正该漏洞（提示：火狐不支持 element.innerText，但支持 innerHTML :)）。

    每个人都是从“不会”到“会”（或者，从无到有）走过来的。当初为了这样一个在静态 html 文件可应用的轻量级控件，找了不少站点。源于自己出身于 c#，故在应用方式上做了类 c# 包装。

    先谈怎么应用，然后说我是怎么实现的。以下是我在源码包中的演示代码：

  1. function CalendarDemon(){  
  2. /// <summary>  
  3. /// 如何使用 Calendar 类的演示代码. 参见代码 JsLibrary/Html/Calendar.js.  
  4. /// 请尊重作者劳动, 引用需注明出处.  
  5. /// Howard.Queen@hotmail.com, 2008-07-03.  
  6. /// http://howard-queen.cnblogs.com/  
  7. /// </summary>  
  8.  
  9.  
  10.     //全局变量  
  11.     window.myCalendar = null;        //日历控件  
  12.     window.currentDay = null;        //当前选择日期  
  13.     window.myTextBox = null;         //当前显示日期的控件  
  14.     window.DayChangedCallback = null;//日历选择日期的回调方法  
  15.     window.MyCalendarPerforms = null;//激活日历的方法, 通过显示控件的相关事件调用  
  16.  
  17.     //日历选择日期的回调方法  
  18.     DayChangedCallback = function(sender, args){  
  19.         try{  
  20.             currentDay = args;  
  21.             myTextBox.value = currentDay.GetText("年", "月", "日");//输出所选日期. 自定义日期序列化.  
  22.             //myCalendar.Hidden();//掩藏控件          
  23.         }  
  24.         catch(e){  
  25.             alert(e.message);  
  26.         }  
  27.     }  
  28.       
  29.     //激活日历的方法  
  30.     MyCalendarPerforms = function(textBox){  
  31.         try{  
  32.             if(myCalendar.IsVisible())  
  33.                 myCalendar.Hidden();//掩藏控件  
  34.             else{  
  35.                 if(myTextBox.value != '')//注意: myTextBox == textBox  
  36.                     currentDay.FromText(myTextBox.value, "年", "月", "日");//获取已有日期. 注意根据日期的格式, 让系统进行反序列.  
  37.                 myCalendar.Show(myTextBox, currentDay);//设置日历显示日期. Show(sender, currentDay), 日历将显示在 sender 附近, 初始化时显示 currentDay.  
  38.             }  
  39.         }  
  40.         catch(e){  
  41.             alert(e.message);  
  42.         }  
  43.     }  
  44.       
  45.     //日历显示容器  
  46.     document.write("<div id='calendarPannel' style='position:absolute; z-index:1; dispay:none;'></div>");  
  47.     var pannel = document.getElementById('calendarPannel');   
  48.       
  49.     //日期显示绑定的控件  
  50.     document.write('<input id="myTextBox" type="text" onclick="javascript:MyCalendarPerforms(this);" />');  
  51.     myTextBox = document.getElementById('myTextBox');  
  52.       
  53.     //本地化, 缺省为英文  
  54.     var months = new CalendarMonths(["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]);  
  55.     var weekdays = new CalendarWeekDays(["日","一","二","三","四","五","六"]);  
  56.          
  57.     //设置初始日期. 缺省参数则为今天.  
  58.     currentDay = new CalendarDay();//currentDay = new CalendarDay(2008, 5, 12);  
  59.       
  60.     //创建日历控件. 注意自定义日历显示位置的位移差, 此处用了(5, -150).  
  61.     myCalendar = new Calendar('myCalendar', pannel, DayChangedCallback, 5, -150, currentDay, months, weekdays);  
  62. } 

    应用它涉及到 5 个关键全局变量的定义。该控件实例，当前所选择的日期实例，显示当前日期的绑定控件，日期选择后的回调函数以及激活日历的方法。月份等显示支持本地化设置，甚至当前日期的输出也支持本地化。

    “揭密该控件的实现内幕”：

  1. /// <reference path="Tooltip.js"/>  
  2.  
  3. function Calendar(Id, pannel, SelectedDayChangedEvent, toper, lefter, selectedDay, calendarMonths, calendarWeekDays){  
  4. /// <summary>  
  5. /// 日期选择控件. 月份从 1 开始.使用方法参见示例代码 JsDemons/Html/CalendarDemon.js.  
  6. /// 参考版本《日期选择 - BY ziyue, By Jiang Hongbin等》.  
  7. /// <see cref="http://web-v.com/article.asp?id=3"/>  
  8. /// <seealso cref="http://web-v.com/trackback.asp?tbID=3&action=addtb&tbKey=2fefac8959f18cceb46771512eff082b27e97c09"/>  
  9. /// 请尊重作者劳动, 引用需注明出处.  
  10. /// Howard.Queen@hotmail.com, 2008-07-03.  
  11. /// http://howard-queen.cnblogs.com/  
  12. /// 2008-07-10   
  13. ///     1, 修改 node.innerText 为 node.innerHTML. 完美支持 Firefox.  
  14. ///     2, 添加年份无上下限功能.  
  15. ///     3, 添加当前所选日期亮显功能.  
  16. ///     4, 更改了自定义日期序列化与反序列化, 使得更加友好.  
  17. ///     5, 采用显示缓存策略以提高性能.  
  18. ///     6, 一些方法的命名更改.  
  19. /// </summary>  
  20. /// <param name="Id" type="string">当前控件名称.</param>  
  21. /// <param name="pannel" type="control">显示容器.</param>  
  22. /// <param name="SelectedDayChangedEvent" type="event">选择日期更改事件.</param>  
  23. /// <param name="selectedDay" type="CalendarDay">所选日期.</param>  
  24. /// <param name="calendarMonths" type="CalendarMonths">月名称.</param>  
  25. /// <param name="calendarWeekDays" type="CalendarWeekDays">周中日名称.</param>  
  26.     this._Init(Id, pannel, SelectedDayChangedEvent, toper, lefter, selectedDay, calendarMonths, calendarWeekDays);  
  27. }  
  28.  
  29. Calendar.prototype = {  
  30.     _Init: function(Id, pannel, SelectedDayChangedEvent, toper, lefter, selectedDay, calendarMonths, calendarWeekDays){  
  31.     },  
  32.     _DrawCallback: function(sender, args){  
  33.     /// <summary>回调显示.</summary>  
  34.     },  
  35.     _Render: function(temp){  
  36.     /// <summary>[私有]</summary>    
  37.     },  
  38.     _RenderYear: function(temp){  
  39.     /// <summary>[私有]</summary>  
  40.     },  
  41.     _RenderMonth: function(temp){  
  42.     /// <summary>[私有]</summary>      
  43.     },  
  44.     _RenderWeek: function(temp){  
  45.     /// <summary>[私有]</summary>  
  46.     },  
  47.     _RenderDay: function(temp){  
  48.     /// <summary>[私有]</summary>  
  49.     },  
  50.     _OnCurrentDayChanging: function(dayCell){  
  51.     },  
  52.     _Refresh: function(year, month) {  
  53.     /// <summary>[私有]</summary>         
  54.     },  
  55.      _CreateCalenday: function(year, month) {  
  56.     /// <summary>[私有]</summary>  
  57.     },  
  58.     _OnYearChanging: function(sender, args){  
  59.     },  
  60.     _OnMonthChanging: function(sender, args){   
  61.     },  
  62.     _OnDayChanging: function(sender, args){  
  63.     },  
  64.     IsVisible: function(){  
  65.     },  
  66.     Hidden: function(){  
  67.     },  
  68.     Show: function(sender, args){  
  69.     }  
  70. }  
  71.  
  72. function CalendarDay(year, month, day){  
  73. /// <summary>Calendar中的日期.</summary>  
  74.     this._Init(year, month, day);  
  75. }  
  76.  
  77. CalendarDay.prototype = {  
  78.     _daysCountOfMonths: new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31),  
  79.     _Init: function(year, month, day){  
  80.     },  
  81.     _GetSubNumber: function(string, head, tail){  
  82.     },  
  83.     CheckDate: function(year, month, day){  
  84.     /// <summary>检查日期合法性.</summary>  
  85.     /// <param name="year" type="int">年份.</summary>  
  86.     /// <param name="month" type="int">月份.</summary>  
  87.     /// <param name="day" type="int">月中日数.</summary>  
  88.     /// <returns>是否合法.</returns>  
  89.     },  
  90.     GetDayInWeek: function(){  
  91.     },  
  92.     IsLeapYear: function(year){  
  93.     /// <summary>是否闰年</summary>  
  94.     /// <param name="year" type="int">年份.</param>  
  95.     /// <returns>是否闰年.</returns>  
  96.     },     
  97.     GetMonthDays: function(year, month){  
  98.     /// <summary>获取月的天数</summary>  
  99.     /// <param name="year" type="int">年份.</param>  
  100.     /// <param name="month" type="int">月份.</param>  
  101.     /// <returns>天数.</returns>  
  102.     },  
  103.     FromText: function(text, yearCaption, monthCaption, dayCaption){  
  104.     /// <summary>设置选定日期.</summary>  
  105.     /// <param name="text" type="string">日期表达式, 顺序为年、月、日.</summary>  
  106.     },  
  107.     GetText: function(yearCaption, monthCaption, dayCaption){  
  108.     /// <summary>获取选定日期.</summary>  
  109.     },  
  110.     GetLocalMonth: function(calendarMonths){  
  111.     },  
  112.     GetLocalWeekDay: function(calendarWeekDays){  
  113.     }  
  114. }  
  115.  
  116. function CalendarMonths(names){  
  117. /// <summary>月枚举.</summary>  
  118. /// <param name="names" type="Array">月自定义名称数组.</param>  
  119. }  
  120.  
  121. function CalendarWeekDays(names){  
  122. /// <summary>周中日枚举.</summary>  
  123. /// <param name="names" type="Array">周中日自定义名称数组.</param>  
  124. } 

    如上所示，我将该控件分解为三个类进行实现，Calendar 只负责绘制子控件以及事件收集，CalendarDay 负责对时间进行核准、计算以及输出，剩下两个类似枚举的辅助类。对于 Tooltip，这是我早前包装的，不是为日历控件特制。这些都有别于原始素材（注意类 Calendar 注释中的 see 以及 seealso 部分），感兴趣的朋友可以就可复用性进行对比。

    Calendar 只对外透露三个方法: Show()，Hidden()，IsVisible()。何时显示、何时掩藏，都由应用开发者定制，这给开发人员在不同场合的应用制造了便利。

    在控件核心类 Calendar 的绘制算法上，我将年（_RenderYear()）、月（_RenderMonth()）、周（_RenderWeek()）、日（_RenderDay()）独立为方法进行输出，有利于代码的自说明，更方便朋友们的定制与修正。在后期的更新中，我在“年”下拉框上增加了“更多过去”与“更多将来”下拉选项，使得年份也不会拘泥于某个特定时间段，而扩展到了无限。而在显示控件（Show()）时，为了防止大量重复计算，只在初次加载控件时进行绘制；但这造成一个小问题，用户当前输入框中的内容只在初始化会同步到控件，其他时刻，控件将忽略。如下代码：

  1. Show: function(sender, args){  
  2.     /// <summary>显示控件.</summary>  
  3.     /// <param name="sender" type="control">发送者.</param>  
  4.     /// <param name="args" type="CalendarDay">当前日期.</param>  
  5.         if(this._yearsSelect == undefined){//第一次加载. Tooltip 中有对当前控件的缓存, 因此这里没有必要重复计算.  
  6.             this.selectedDay = args;  
  7.             this.offsetTop = sender.offsetTop;  
  8.             this.offsetLeft = sender.offsetLeft;  
  9.             this.clientHeight = sender.clientHeight;  
  10.             this.clientWidth = sender.clientWidth;  
  11.             this._toolTip.Show(sender, this);  
  12.             this._yearsSelect = document.getElementById([this.Id, '_yearsSelect'].join(''));  
  13.             this._monthsSelect = document.getElementById([this.Id, '_monthsSelect'].join(''));  
  14.             this._daysTable = document.getElementById([this.Id, '_daysTable'].join(''));  
  15.             for (var weekIndex = 0, dayInWeek = 0; weekIndex < this._daysTable.rows.length; weekIndex++){  
  16.                 for (; dayInWeek < this._daysTable.rows[weekIndex].cells.length; dayInWeek ++){   
  17.                     cell = this._daysTable.rows[weekIndex].cells[dayInWeek];   
  18.                     switch(dayInWeek){  
  19.                         case 0://星期日  
  20.                             cell.style.color = 'red';  
  21.                             break;  
  22.                         case 6://星期六  
  23.                             cell.style.color = 'green';   
  24.                             break;  
  25.                         default://其他  
  26.                             break;  
  27.                     }  
  28.                 }  
  29.                 dayInWeek = 0;  
  30.             }  
  31.             this._CreateCalenday(this._yearsSelect.value, this._monthsSelect.value);  
  32.         }  
  33.         else{  
  34.             this._toolTip.Show(sender, this);  
  35.         }  
  36.     } 

    在日期类 CalendarDay 的设计上，针对日期的输出形式仍有较大开发空间。在后期的更新中，我只是简单的加了对年月日的重命名输出，以及对该输出的反向识别，但没有实现类 c# 的 ToString("yyMMdd") 等方法。看我的具体实现：

  1. FromText: function(text, yearCaption, monthCaption, dayCaption){  
  2.     /// <summary>设置选定日期.</summary>  
  3.     /// <param name="text" type="string">日期表达式, 顺序为年、月、日.</summary>  
  4.         if(text == undefined || text == null || text == ''){  
  5.             throw {name:"ArgumentNullException", message:"参数为空, 参数名 text."};  
  6.         }  
  7.         if(yearCaption == undefined || yearCaption == null || yearCaption == '')  
  8.             yearCaption = '-';  
  9.         if(monthCaption == undefined || monthCaption == null || monthCaption == '')  
  10.             monthCaption = '-';  
  11.         if(dayCaption == undefined || dayCaption == null)  
  12.             dayCaption = '';  
  13.         var year = parseInt(this._GetSubNumber(text, '', yearCaption));  
  14.         var month = parseInt(this._GetSubNumber(text, yearCaption, monthCaption));  
  15.         var day = parseInt(this._GetSubNumber(text, monthCaption, dayCaption));       
  16.         this.CheckDate(year, month, day);  
  17.         this.year = year;  
  18.         this.month = month;  
  19.         this.day = day;  
  20.         this._dayInWeek = -1;  
  21.     },  
  22.     GetText: function(yearCaption, monthCaption, dayCaption){  
  23.     /// <summary>获取选定日期.</summary>  
  24.         if(yearCaption == undefined || yearCaption == null || yearCaption == '')  
  25.             yearCaption = '-';  
  26.         if(monthCaption == undefined || monthCaption == null || monthCaption == '')  
  27.             monthCaption = '-';  
  28.         if(dayCaption == undefined || dayCaption == null)  
  29.             dayCaption = '';  
  30.         return [this.year, yearCaption, this.month, monthCaption, this.day, dayCaption].join('');  
  31.     }, 

    开发过程的乐趣在于，你所做的给自己或者别人带来了一些便利；对于学习开发的入门兄弟来说更是如此。总是说程序员大概都是懒人，能复用的代码，绝不写第二遍；有些人甚至因此偏执于搞复用：用最少的现有代码，延用过去做好的“控件”。但能否在各种场景下复用，就看你对经验的总结了。

    虽然都是小把戏，但还是善意的提醒朋友们：将一个计算过程分滩给多个方法，每个方法短而功能明确，这对以后追加功能或是查找漏洞都会很有帮助。什么时候，我能把设计模式给搞透？

posted @ 2008-08-24 15:40  陛下  阅读(4900)  评论(11)  编辑  收藏  举报