DatePicker使用说明

 

DatePicker使用简单说明

Datepicker是jqueryui插件中的一个，所以使用Datepicker的时候需要引入jquery.js文件。

Jqueryui官方网站提供了许多中样式，你可以通过选择不同的css样式下载使用。

Datepicker的使用实例

$(document).ready(function(){

       $(.selector).datepicker();

});

以上代码就可以实现datepicker的效果。如果需要更多选项，可以通过如下代码

$(document).ready(function(){

       $("#Schedule").datepicker({

                     dateformat:"yy-mm-dd",

                     changeMonth:true,

                     changeYear:true,

                     onSelect:function(date,inst){

                            ....

                     }

       });

});

更多选项，可以查看jqueryui官方网站。网站地址可以在附录中查找。

Datepicker本地化

Datepicker使用中默认是英文的。如果想修改为你所熟悉的语言，可以通过下载本地化js文件，实现Datepicker本地化设置。

本地化文件下载地址:http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/

中文js下载地址:http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/jquery.ui.datepicker-zh-CN.js

使用实例<使他支持中文>

引入jquery.js、jquery-ui.js、jquery.ui.datepicker-zh-CN.js。

$(document).ready(function(){

       $(.selector).datepicker();

       $(.selector).datepicker($.datepicker.regional['zh']);

});

说明:本地化的代码一定要放在datepicker初始化之后，否则设置的datepicker可能会出现异常情况。

Datepicker中文本地化后样式问题

Datepicker中文化后，设置ChangeMonth、changeYear为true后，样式会出现不兼容问题。如右图。

解决方案：

在官方提供的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{margin-left:4px;}
.ui-datepicker select.ui-datepicker-month{ width: 40%;vertical-align:top;}
.ui-datepicker select.ui-datepicker-year { width: 43%;vertical-align:top;}

.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: left; }    
ui-datepicker-title{vertical-align:middle;}

这样样式就没有问题了。

OnSelect事件

官方解释:Allows you to define your own event when the datepicker is selected. The function receives the selected date as text and the datepicker instance as parameters. this refers to the associated input field

译文：当日期被选中后，允许你自定义事件。这个函数把选中的日期(文本格式)和本身实例作为参数。这将涉及相关的输入框。

$('.selector').datepicker({

   onSelect: function(dateText, inst) { ... }

});

说明:在datepicker中，如果有自定义的相关事项时，执行该事件后，会执行保存并refresh datepicker页面。

解决办法:

$('.selector').datepicker({

   onSelect:function(dateText,inst){

                                          inst.inline=false;

                                          …….

                                   }

});

beforeShowDay事件

官方说明: The function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable, [1] equal to a CSS class name(s) or '' for the default presentation, and [2] an optional popup tooltip for this date. It is called for each day in the datepicker before it is displayed

译文: 这个函数带有一个时间参数，返回一个长度为3的数组。

数组第一个值等于true/false,说明这个日期是否可以选中。

第二个值代表这个日期应用的css中的class名称,也可以用''代表默认样式。

第三个值是一个可选的日期弹出提示，在日期显示之前被调用。

实例

$('.selector').datepicker({

   beforeShowDay: function(date) {

       return [true/false,"class names",[可选参数]]; }

});

源码:设置一个相关的日程表

HTML代码:

<div id="Schedule"></div>

Css代码

<style type="text/css">

       .used .ui-state-default{ background-image:none; background-color:#ff0000; color:#00ff00;}

</style>

Js代码

<script type="text/javascript" language="javascript">

       $(document).ready(function(){

                     var i=0;

                     var datelist=new Array('2011-09-10','2011-09-20','2011-09-30','2011-10-1','2011-10-10','2011-10-20');

                     $("#Schedule").datepicker({

                                   changeMonth:true,

                                   changeYear:true,

                                   beforeShowDay:function(date){

                                          for(i=0;i<datelist.length;i++){

                                                        if(date.getYear()==datelist[i].split('-')[0] && date.getMonth()+1==datelist[i].split('-')[1] && date.getDate()==datelist[i].split('-')[2]){

                                                               return [true,"used",""];

                                                               }

                                                 }

                                          return [true,"",""];

                                          }

                                  

                                  

                            });

                           

              });

</script>

原码下载地址: http://dl.dbank.com/c0cgeqbz0s

附录

1、Jquery插件的官方网站是：http://jqueryui.com   中文网站 :http://jqueryui.net/

2、datepicker是jqueryui中的小工具(widgets)

3、datepicker的demo网址：http://jqueryui.com/demos/datepicker

4、下载datepicker的demos等，网址：http://jqueryui.com/download,通过选择不同的Theme(样式)，得到不同的demo实例

5、jqueryui是基于jquery类库，创建的插件！，使用时必须引入相应的jquery版本！

6、jqueryui中的css样式，基于不同的图片！你可以通过下载不同的样式文件Theme，来使用各种各样的Datepicker!

7、对于不同的网站，需要不同的语言版本，当然，你完全可以自己修改属性，来达到中文（或者各种你希望的语言）效果！但是，你也可以通过访问http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/来下载不同的本地化文件!达到相同的目的！中文的下载路径是：http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/jquery.ui.datepicker-zh-CN.js