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

        最简单的用法

 

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

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-强大的日期控件