jQuery ui之Datepicker(日期选择器)

　　本来struts2中可以装上struts-jquery插件包，这个插件包中已经包含有了很多的UI（包括Datepicker），还有一些ajax框架功能，但struts-jquery有一个严重的弊端，就是往往导入了一些不必要的文件，而使得整个页面的体积过于庞大，降低了客户的体验。

　　为了尽可能减少UI的体积，而又要能满足我是一个拿来主义者的身份，jQuery ui 就成了我的目标。而Datepicker只是jQuery ui中的一个小项目，除了Datepicker外，还有林林种种的其他ui，应该都是很不错的，但现在只需要用到Datepicker，所以其他的ui并没有去了解。有兴趣可以到jQuery ui 去看一下文档。

　　经过一翻恼火的英文reference阅读后，大概了解了Datepicker的使用，下面分步骤说明：

 

一、下载Datepicker

　　这一步就不多说了，看到Download就去下载吧。

　　不过值得一提的就是，在下载页面中，可以选择自己需要的ui来下载，不然的话会下载所有ui。选择UI CORE和Widgets中的Datepicker就可以了(网上写着Datepicker依赖于UI CORE，但在实际应用中我没有加载UI CORE，也一样能用 )。另外还可以选择相应的主题(theme)来下载，个人比较喜欢smoothness。

　　由于ui都离不开css，而jQuery ui 提供了一个很方便，强大的即见即所得的ui编辑器 ，可以方便地修改ui的css。

 

二、加载Datepicker

　　把下载后的压缩文件解压以后，会有３个文件夹和１个index.html文件。

　　index.html：这是Datepicker的示例文件，用编辑器打开可以借鉴一下使用方法。

　　css文件夹：顾名思义是放css的地方，里面还有一个images的文件夹，是放css所需要的图片的，所以css文件与这个images文件夹要放在项目中同一个文件夹中 。

　　development-bundle文件夹：这里放了ui core的js，css样例文件，但应用中没用到，可以忽视。

　　js文件夹：有两个js文件，１个jquery的源文件，１个就是Datepicker的源文件了。

 

　　那么接下来就是在页面上引用所需要的文件就可以了。所有需要引用的文件包括：jquery-1.4.2.min.js、jquery-ui-1.8.6.custom.min.js、jquery-ui-1.8.6.custom.css

 

三、调用Datepicker的ＡＰＩ，生成日期选择器

　　不多说，看代码应该都能明白：

 

$(function(){
    $(selector).datepicker(obj);
   }
)
/*
*selector：jQuery选择器的表达式，一般是textfield，div，span的jQuery对象
*obj：一个参数对象，包含了所有Datepicker的配置属性，关于配置属性请看第四步配置属性
*/

 

四、Datepicker的一些重要配置属性

 

　　dateFormat：String值，是用来格式化日期的显示的，但这个格式化字符串与java的格式化日期字符串有些区别，具体请看ui/Datepicker/formatDate

 

　　changeYear：boolean值，是否能在选择器中使用下拉框选择年份。

 

　　changeMonth：boolean值，是否能在选择器中使用下拉框选择月份。

 

　　yearRange：String值，控制选择器的年份范围，如"c-10,c+10"表示在当前年份的前后１０年。c代表当前年份。

 

　　dayNames：Array值，控制当鼠标放在选择器的日期上时显示的文本，还与dateFormat中的DD对应。如['sunday',...]

 

　　dayNamesMin：Array值，选择器上星期的显示文本。如['日','一'...]

 

　　hideIfNoPrevNext:boolean值，控制是否当没有下/上一个月份时，隐藏next/prev按扭

 

　　monthNames：Array值，选择器上月份的显示文本，如['一月','二月',...]

 

　　showMonthAfterYear：boolean值，是否让月份显示在年份之后，默认为false;

 

　　yearSuffix：String值，在年份后面显示的文本，默认为""

 

　　defaultDate：Date值（还可以是Number , String类型，但我觉得用Date类型比较方便 ），设置选择器默认的日期。如：new Date(1990,0,1)

 

　　maxDate：Date值（还可以是Number , String类型），设置选择器日期上限。如：new Date(2100,0,1);

 

　　minDate：Date值（还可以是Number , String类型）， 设置选择器日期上限。如：new Date(1900,0,1);

 

　　注意：经过以上四步后，大家会发现生成出来的选择器与网上看到的选择器不一样，那是因为官方示例中，在页面配有CSS:body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}来控制字体的大小和字符集，而我在几翻折腾后在Datepicker的CSS开始处添加ui-datepicker-calendar th{font-family:宋体}，末尾处添加.ui-widget{font-size:62.5%}，便能生成与官网一模一样的选择器了。(这个css的配置仅供参考)

 

 

　　这样的Datepicker已经能够满足大部份的需求了，如果还有什么别的需求，就去jQuery ui 中碰碰运气，要不就看下jQuery plugins 。 不过jQuery plugins好像是其他用户修改ui后共享出来的版本，感觉没必要去用jQuery plugins 。官方发布的jQuery ui 已经满足大部份的需求了，当有额外需求再去找jQuery plugins 。