jquery datepicker-强大的日期控件

在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，样式表也可以自定义。

最简单的用法

如果仅仅只需要输入日期，那么一句话就搞定了。如：

$("#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中加了一些属性。代码为:

$("#date").datepicker({
changeYear : true,
changeMonth : true,
numberOfMonths : 1,
showButtonPanel: true
});

显示的效果:

是不是相比以前的datepicker要好看一点呢，既能选择年份，还能选择月份，多方便呀。有的时候可能会遇到这样的问题。导入国际化语言包后，同时启用changeYear和changeMonth，会发现两个select都在都一列显示了。原因是juqery-ui.css造成的，原来这个文件中有这么一段:

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { width: 49%;}

把这个width的比例改成45%就能正常显示了。

当然官网上还有更多属性供大家选择。地址为：http://jqueryui.com/demos/datepicker/ ，根据自己需要，自行选择。

常用方法

最常用的可能是onSelect方法了，这种情况是很常见的，比如页面有两个日期，开始时间和结束时间。很明显的道理，开始时间不能大于结束时间。onSelect方法可以为我们省去判断。代码如下:

$("#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-强大的日期控件

来源：https://www.cnblogs.com/hongzai/p/3155725.html

标签

datepicker

jquery

jquery日期控件