在web开发中，总会遇到需要用户输入日期的情况。一般都是提供一个text类型的input供用户输入日期。然而，这种方式，开发人员必须对用户输入的日期进行验证，判断其合法性。除此之外，让用户输入日期也是一件不爽的事，如果用户可以直接选择日期，这两个问题都解决了。
我们也可以自己用javascript写一个日期选择控件，然而，想要写的很好、很漂亮却需要花不少时间和精力。jQuery有一个UI插件： datepicker ，可以帮我们实现该功能，而且界面很漂亮。下面就学学如何使用它吧。
datepicker 插件是jQuery UI的一个插件，它提供一个日期弹出窗口（或直接显示在页面），供用户选择日期。
前提条件
- 导入jquery-1.7.2.js ，也可以是其它版本。我做的demo是这个
- 导入jquery-ui.js，也可以直接指向http://code.jquery.com/ui/1.10.2/jquery-ui.js 这个地址。前提是要有网络。
- 添加对中文的支持-jquery.ui.datepicker-zh-CN.js，如果没有这个文件，显示英文版。
- 导入jquery-ui.css，样式表也可以自定义。
最简单的用法
如果仅仅只需要输入日期，那么一句话就搞定了。如：
|
1
|
$(
"#date"
).datepicker();
|
显示的效果:
简单吧，只需这一句就能弹出日期选择器。代码中的date为页面中input的id。如果我们想做的更加人性化，显然这一句就不够了。比如这个日期选择器只能按月翻，不能直接选择年份和月份。还有很多方面就不一一列举了。下面对datepicker的常用属性做个说明。
常用属性
changeYear : true //允许选择年份,默认为false
changeMonth : true //允许选择月份,默认为false
numberOfMonths : 1 //显示的日期面板个数，默认为1
showButtonPanel: true //是否显示按钮面板（两个按钮：回到今天、关闭），默认为false。
showOn:’button’ //在输入框旁边显示按钮触发，默认为：focus，还可以设置为both。
showClearButton:true //是否显示清除按钮,有的版本可能没有提供清除按钮。
为了让datepicker更加生动，我在demo中加了一些属性。代码为:
|
1
2
3
4
5
6
|
$(
"#date"
).datepicker({
changeYear :
true
,
changeMonth :
true
,
numberOfMonths : 1,
showButtonPanel:
true
});
|
显示的效果:
是不是相比以前的datepicker要好看一点呢，既能选择年份，还能选择月份，多方便呀。有的时候可能会遇到这样的问题。导入国际化语言包后，同时启用changeYear和changeMonth，会发现两个select都在都一列显示了。原因是juqery-ui.css造成的，原来这个文件中有这么一段:
|
1
2
|
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
width
:
49%
;}
|
把这个width的比例改成45%就能正常显示了。
当然官网上还有更多属性供大家选择。地址为： http://jqueryui.com/demos/datepicker/ ，根据自己需要，自行选择。
常用方法
最常用的可能是onSelect方法了，这种情况是很常见的，比如页面有两个日期，开始时间和结束时间。很明显的道理，开始时间不能大于结束时间。onSelect方法可以为我们省去判断。代码如下:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
$(
"#date1"
).datepicker({
changeYear :
true
,
changeMonth :
true
,
numberOfMonths : 1,
showButtonPanel:
true
,
onSelect :
function
(selectedDate) {
$(
"#date2"
).datepicker(
"option"
,
"minDate"
, selectedDate); }
});
$(
"#date2"
).datepicker({
changeYear :
true
,
changeMonth :
true
,
numberOfMonths : 1,
showButtonPanel:
true
,
onSelect :
function
(selectedDate) {
$(
"#date1"
).datepicker(
"option"
,
"maxDate"
, selectedDate); }
});
|
显示效果:
如果开始时间选择了 2012-05-09，结束时间就不能选择之前的日期了。我做的demo都是比较简单的，更多功能可以去jquery UI的官网上看看。
通过上面的例子，可以看出datepicker是一款不错的日期选择器，使用方便，容易上手,官网还提供了很多美观的皮肤。你值得拥有！
原创文章，转载请注明： 转载自java开发者
本文链接地址: jquery datepicker-强大的日期控件