jQuery UI 日期控件--datepicker

在web开发中，日期的输入经常会遇到。我们会用的解决方法有：

　　　　　　　　　　1、自己写css和js，对日期进行控制；----有点浪费精力和时间；

　　　　　　　　　　2、用easyui插件中的日期插件来实现；

　　　　　　　　　　3、用juqery-ui中的日期控件--datepicker来实现。

今天，我们注重学习下标题上提到的日期控件，juqery-ui-datepicker控件。对于easyUI有感兴趣的，可以寻找资料继续研究。

datepicher插件是jQuery UI的一个插件，它提供一个日期弹出窗口（或直接显示在页面），供用户选择日期。

datepicker插件使用的具体语法：

　　$("#id").datepicker(optional); 

标注：optional是一个对象，该对象的每个属性及含义和方法可以参考API官方网站：http://jqueryui.com/datepicker/

具体用法：

1、简单的js代码：

　　$("#id").datepicker();

id:页面上日期输入框的id

生成的日期框描述：在日期输入框获得焦点时，就会弹出一个日期选择窗口。然而，这时候的日期选择窗口有很多不方便的地方，比如：只能一个月一个月的往前或往后，没有关闭按钮等

2、添加配置后的代码：可以改变一些默认设置，如下的可以选择年份和月份

$("#regDate").datepicker(       
{       
   showMonthAfterYear: true, // 月在年之后显示       
   changeMonth: true,   // 允许选择月份       
   changeYear: true,   // 允许选择年份       
   dateFormat:'yy-mm-dd',  // 设置日期格式       
   closeText:'关闭',   // 只有showButtonPanel: true才会显示出来       
   duration: 'fast',       
   showAnim:'fadeIn',       
   showOn:'button',   // 在输入框旁边显示按钮触发，默认为：focus。还可以设置为both       
   buttonImage: 'images/commons/calendar.gif',   // 按钮图标       
   buttonImageOnly: true,        // 不把图标显示在按钮上，即去掉按钮       
   buttonText:'选择日期',       
   showButtonPanel: true,       
   showOtherMonths: true,       
  //appendText: '(yyyy-mm-dd)',       
});     

3、增强日期清除按钮和日期判断功能（增强版的datepicher1.7.2）

$(function()       
{       
$("#effDate").datepicker(       
{       
   showMonthAfterYear: true, // 月在年之后显示       
   changeMonth: true,   // 允许选择月份       
   changeYear: true,   // 允许选择年份       
   dateFormat:'yy-mm-dd',  // 设置日期格式       
   showClearButton: true,       
  //clearText: '清除',       
   closeText:'关闭',   // 只有showButtonPanel: true才会显示出来       
   duration: 'fast',       
   showAnim:'fadeIn',       
   showOn:'button',       
   buttonImage: 'images/commons/calendar.gif',       
   buttonImageOnly: true,       
   buttonText:'选择日期',       
   showButtonPanel: true,       
   showOtherMonths: true,       
  //appendText: '(yyyy-mm-dd)',       
   onSelect: function(dateText, inst)    // 使结束时间大于开始时间       
   {       
   /**   
     * 以下写法在IE中出现问题。   
     * $('#expDate').datepicker('option', 'minDate', new Date(dateText.replace(/-/g,',')));   
     * 时，在结束（过期时间）选择时，年会没有，而且控制会失效。通过调试，发现new Date(dateText.replace(/-/g,','))   
     * 返回的结果是NaN。说明Date对象不能这么构造（但是Firefox可以）   
     */       
    var arys = new Array();       
    var arys = dateText.split('-');       
     $('#expDate').datepicker('option', 'minDate', new Date(arys[0],arys[1]-1,arys[2]));       
   }       
});       
      
$("#expDate").datepicker(       
{       
   showMonthAfterYear: true, // 月在年之后显示       
   changeMonth: true,   // 允许选择月份       
   changeYear: true,   // 允许选择年份       
   dateFormat:'yy-mm-dd',  // 设置日期格式       
   showClearButton: true,  // 自定义的方法(1.7.2没有清除按钮）       
  //clearText: '清除',    // 自定义的文本，在文档在有定义（js中）       
   closeText:'关闭',   // 只有showButtonPanel: true才会显示出来       
   duration: 'fast',       
   showAnim:'fadeIn',       
   showOn:'button',   // 在输入框旁边显示按钮触发，默认为：focus。还可以设置为both       
   buttonImage: 'images/commons/calendar.gif',   // 按钮图标       
   buttonImageOnly: true,        // 不把图标显示在按钮上，即去掉按钮       
   buttonText:'选择日期',       
   showButtonPanel: true,       
   showOtherMonths: true,       
  //appendText: '(yyyy-mm-dd)',       
   onSelect: function(dateText, inst)       
   {       
   var arys = new Array();       
   var arys = dateText.split('-');       
    $('#effDate').datepicker('option','maxDate',new Date(arys[0],arys[1]-1,arys[2]));       
   }       
});       
});  

　　

datepicher1.7.2版本没有提供清除按钮，这让人有点遗憾。（好像之前的版本有提供）。没有清除按钮是很不方便的，特别是输入框获得焦点就弹出日期选择窗口的情况更是如此，因为这时想要清除输入框中的日期比较麻烦。在此推荐一位网友提供的增强版datepicher1.7.2。该增强版datepicher1.7.2不仅实现了清除按钮功能，而且增加了日期大小比较验证，比如：一个日期只能在另一个之后。

4、国际化的实现

datepicher提供了国际化的功能。只需将ui.datepicker-zh-CN.js导入页面即可。（或者导入jquery-ui-i18n.js，该文件包含了很多中语言）注意，如果想使用上面提到的增强版datepicher1.7.2，则需要下载作者提供的国际化文件。另外，如果用Eclipse之类的工具编码，注意用eclipse打开国际化文件看看，很有可能显示为乱码。只需要把文件的编码格式改为utf-8，然后用其他编辑工具，如editplus打开国际化文件，拷贝，粘贴覆盖eclipse中的，保存就OK了。

5、国际化中遇到的中文问题

在使用国际化同时启用changeYear和changeMonth后，两个select显示为两行，很不好看。找了好久，发现在官方提供的jquery-ui-1.7.2.custom.css中，应该作如下几处修改： 
.ui-datepicker .ui-datepicker-title select { float:left; font-size:1em; margin:1px 0; } 
.ui-datepicker select.ui-datepicker-month-year { 100%;} 
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { 49%;} 
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: right; } 

应该改为： 
.ui-datepicker .ui-datepicker-title select {font-size:1em; margin:1px 0; } 
.ui-datepicker select.ui-datepicker-month-year { 100%;} 
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { 47%;} 
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: left; } 

就OK了 

6、换肤功能

jQuery UI预定义了很多皮肤，下载后，只需在页面引入相应皮肤的jquery-ui-1.7.2.custom.css可以实现换肤。如果给用户提供换肤功能，可以通过js控制，实现换肤。 

建议：在使用中，可以定义一个文件，包含该插件的使用，配置好。以后有需要使用的地方，引入该文件，同时传给当前需要使用日期选择控件的id属性，这样便可以只配置一次了。

 http://www.cnblogs.com/yasin/archive/2009/07/10/1520736.html