日历控件推介之：Dynarch.com Calendar

日历是 WEB 开发中经常用到的控件之一，在和日期相关的表单里，我们通常需要提供一个日期选择器，方便用户使用、提高用户体验。本文向您推介的是  Dynarch.com 开发的一个日历控件，她功能十分健全，内置多种皮肤，支持多种语言，同时提供了一个配置程序，使用非常方便。本文发布时版本为 1.0。

第一步：包含相关文件
HTML:

   
   

     
     

      
       
     
     

     
     

      
      <!-- 日历控件样式，内置了十种样式 --> 
     
     

     
     

      
      <link rel="stylesheet" type="text/css" media="all" href="calendar-win2k-cold-1.css" title="win2k-cold-1" /> 
     
     

     
     

      
       
     
     

     
     

      
      <!-- 日历控件主程序 --> 
     
     

     
     

      
      <script type="text/javascript" src="calendar.js">
      
      </script> 
     
     

     
     

      
       
     
     

     
     

      
      <!-- 日历控件的语言包 --> 
     
     

     
     

      
      <script type="text/javascript" src="lang/calendar-en.js">
      
      </script> 
     
     

     
     

      
       
     
     

     
     

      
      <!-- 内置的日历控件配置程序，可以让你用几行代码实现控件功能 --> 
     
     

     
     

      
      <script type="text/javascript" src="calendar-setup.js">
      
      </script> 
     
     

     
     

      
       
     
     

第二步：根据你的表单元素设置日历控件
HTML:

   
   

     
     

      
       
     
     

     
     

      
      <form action="#" method="get"> 
     
     

     
     

      
      <input type="text" name="date" id="f_date_b" />
      
      <button type="reset" id="f_trigger_b">...
      
      </button> 
     
     

     
     

      
      </form> 
     
     

     
     

      
       
     
     

     
     

      
      <script type="text/javascript"> 
     
     

     
     

      
          Calendar.setup({ 
     
     

     
     

      
              inputField     :    "f_date_b",      // id of the input field 
     
     

     
     

      
              ifFormat       :    "%m/%d/%Y %I:%M %p",       // format of the input field 
     
     

     
     

      
              showsTime      :    true,            // will display a time selector 
     
     

     
     

      
              button         :    "f_trigger_b",   // trigger for the calendar (button ID) 
     
     

     
     

      
              singleClick    :    false,           // double-click mode 
     
     

     
     

      
              step           :    1                // show all years in drop-down boxes (instead of every other year as default) 
     
     

     
     

      
          }); 
     
     

     
     

      
      </script> 
     
     

     
     

      
       
     
     

内置的配置程序里面提供了丰富的配置参数，能让你实现大多数日历控件功能，具体说明请参考说明文档。


源代码下载地址：
http://prdownloads.sourceforge.net/jscalendar/jscalendar-1.0.zip?download


在线文档：（英文）
http://www.dynarch.com/demos/jscalendar/doc/html/reference.html