jquery 时间datepicher

其中optional是一个对象，该对象的每一个属性及含义可以参看官方文档：http://jqueryui.com/demos/datepicker/。在此，仅介绍一些常用的属性。

1、datepicher最简单的使用

Javascript代码
$("#regDate").datepicher();


其中,regDate是页面日期输入框的ID属性值。

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

2、配置datepicher

通过给datepicher设置一些属性值可以改变默认的显示。如：

Js代码

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


$("#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）

datepicher1.7.2版本没有提供清除按钮，这让人有点遗憾。（好像之前的版本有提供）。没有清除按钮是很不方便的，特别是输入框获得焦点就弹出日期选择窗口的情况更是如此，因为这时想要清除输入框中的日期比较麻烦。在此推荐一位网友提供的增强版datepicher1.7.2。该增强版datepicher1.7.2不仅实现了清除按钮功能，而且增加了日期大小比较验证，比如：一个日期只能在另一个之后。可以访问该网址查看：http://www.cnblogs.com/yasin/archive/2009/07/10/1520736.html。这时datepicher的使用已经相当完美：


Js代码

1. $(function()
2. {
3. $("#effDate").datepicker(
4. {
5. showMonthAfterYear: true, // 月在年之后显示
6. changeMonth: true, // 允许选择月份
7. changeYear: true, // 允许选择年份
8. dateFormat:'yy-mm-dd', // 设置日期格式
9. showClearButton: true,
10. //clearText: '清除',
11. closeText:'关闭', // 只有 showButtonPanel: true才会显示出来
12. duration: 'fast',
13. showAnim:'fadeIn',
14. showOn:'button',
15. buttonImage: 'images/commons/calendar.gif',
16. buttonImageOnly: true,
17. buttonText:'选择日期',
18. showButtonPanel: true,
19. showOtherMonths: true,
20. //appendText: '(yyyy-mm-dd)',
21. onSelect: function(dateText, inst) // 使结束时间大于开始时间
22. {
23. /**
24. * 以下写法在IE中出现问题。
25. * $('#expDate').datepicker('option', 'minDate', new Date(dateText.replace(/-/g,',')));
26. * 时，在结束（过期时间）选择时，年会没有，而且控制会失效。通过调试，发现 new Date(dateText.replace(/-/g,','))
27. * 返回的结果是NaN。说明Date对象不能这么构造（但是Firefox可以）
28. */
29. var arys = new Array();
30. var arys = dateText.split('-');
31. $('#expDate').datepicker('option', 'minDate', new Date(arys[0],arys[1]-1,arys[2]));
32. }
33. });
34.
35. $("#expDate").datepicker(
36. {
37. showMonthAfterYear: true, // 月在年之后显示
38. changeMonth: true, // 允许选择月份
39. changeYear: true, // 允许选择年份
40. dateFormat:'yy-mm-dd', // 设置日期格式
41. showClearButton: true, // 自定义的方法(1.7.2没有清除按钮）
42. //clearText: '清除', // 自定义的文本，在文档在有定义（js中）
43. closeText:'关闭', // 只有 showButtonPanel: true才会显示出来
44. duration: 'fast',
45. showAnim:'fadeIn',
46. showOn:'button', // 在输入框旁边显示按钮触发，默认为：focus。还可以设置为both
47. buttonImage: 'images/commons/calendar.gif', // 按钮图标
48. buttonImageOnly: true, // 不把图标显示在按钮上，即去掉按钮
49. buttonText:'选择日期',
50. showButtonPanel: true,
51. showOtherMonths: true,
52. //appendText: '(yyyy-mm-dd)',
53. onSelect: function(dateText, inst)
54. {
55. var arys = new Array();
56. var arys = dateText.split('-');
57. $('#effDate').datepicker('option','maxDate',new Date(arys[0],arys[1]-1,arys[2]));
58. }
59. });
60. });

$(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]));
}
});
});


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 {width: 100%;}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { width: 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 {width: 100%;}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { width: 47%;}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: left; }

就OK了

6、换肤

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

总结：

可以看出，datepicher是一个很好用的插件，比自己写的肯定要好用很多，推荐大家使用。

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