jQuery Datepicker 日期控件 用法
因为是转载文章 在此标明出处，以前有文章是转的没标明的请谅解，因为有些已经无法找到出处，或者与其它原因。
如有冒犯请联系本人，或删除，或标明出处。
因为好的文章，以前只想收藏，但连接有时候会失效，所以现在碰到好的直接转到自己这里。
原文 出处http://wenku.baidu.com/view/db15e9010740be1e650e9a1d.html
http://polaris1119.javaeye.com/blog/557514
在Web开发中，总会遇到需要用户输入日期的情况。一般都是提供一个text类型的input供用户输入日期。然而，这种方式，开发人员必须对用户输入的日期进行验证，判断其合法性。除此之外，用户输入日期也是一件不爽的事，如果用户可以直接选择日期，这两个问题都解决了。听起来很不错。实际上，很多开发者都是这么做的。
我们可以自己用javascript写一个日期选择控件，然而，想要写的很好、很漂亮却需要花不少时间和精力。jQuery有一个UI插件：datepicher，可以帮我们实现该功能，而且界面很漂亮。下面就学学如何使用它吧。
datepicher插件是jQuery UI的一个插件，它提供一个日期弹出窗口（或直接显示在页面），供用户选择日期。
datepicher插件的使用很简单，语法如下：
Javascript代码
- $("#regDate").datepicher(optional);
$("#regDate").datepicher(optional);
其中optional是一个对象，该对象的每一个属性及含义可以参看官方文档：http://jqueryui.com/demos/datepicker/。在此，仅介绍一些常用的属性。
1、datepicher最简单的使用
Javascript代码
- $("#regDate").datepicher();
$("#regDate").datepicher();
其中,regDate是页面日期输入框的ID属性值。
就这一句话，在日期输入框获得焦点时，就会弹出一个日期选择窗口。然而，这时候的日期选择窗口有很多不方便的地方，比如：只能一个月一个月的往前或往后，没有关闭按钮等。
2、配置datepicher
通过给datepicher设置一些属性值可以改变默认的显示。如：
Javascript代码
- $("#regDate").datepicker(
- {
- showMonthAfterYear: true, // 月在年之后显示
- changeMonth: true, // 允许选择月份
- changeYear: true, // 允许选择年份
- dateFormat:'yy-mm-dd', // 设置日期格式
- closeText:'关闭', // 只有showButtonPanel: true才会显示出来
- duration: 'fast',
- showAnim:'fadeIn',
- showOn:'button', // 在输入框旁边显示按钮触发，默认为：focus。还可以设置为both
- buttonImage: 'images/commons/calendar.gif', // 按钮图标
- buttonImageOnly: true, // 不把图标显示在按钮上，即去掉按钮
- buttonText:'选择日期',
- showButtonPanel: true,
- showOtherMonths: true,
- //appendText: '(yyyy-mm-dd)',
- });
$("#regDate").datepicker(
{
showMonthAfterYear: true, // 月在年之后显示
changeMonth: true, // 允许选择月份
changeYear: true, // 允许选择年份
dateFormat:'yy-mm-dd', // 设置日期格式
closeText:'关闭', // 只有showButtonPanel: true才会显示出来
duration: 'fast',
showAnim:'fadeIn',
showOn:'button', // 在输入框旁边显示按钮触发，默认为：focus。还可以设置为both
buttonImage:'images/commons/calendar.gif', // 按钮图标
buttonImageOnly: true, // 不把图标显示在按钮上，即去掉按钮
buttonText:'选择日期',
showButtonPanel: true,
showOtherMonths: true,
//appendText: '(yyyy-mm-dd)',
});
这个时候的日期选择就很方便了。可以自由选择年份和月份。
3、增加清除按钮和日期判断功能（增强版datepicher1.7.2）
datepicher1.7.2版本没有提供清除按钮，这让人有点遗憾。（好像之前的版本有提供）。没有清除按钮是很不方便的，特别是输入框获得焦点就弹出日期选择窗口的情况更是如此，因为这时想要清除输入框中的日期比较麻烦。在此推荐一位网友提供的增强版datepicher1.7.2。该增强版datepicher1.7.2不仅实现了清除按钮功能，而且增加了日期大小比较验证，比如：一个日期只能在另一个之后。可以访问该网址查看：http://www.cnblogs.com/yasin/archive/2009/07/10/1520736.html
。这时datepicher的使用已经相当完美：
Javascript代码
- $(function()
- {
- $("#effDate").datepicker(
- {
- showMonthAfterYear: true, // 月在年之后显示
- changeMonth: true, // 允许选择月份
- changeYear: true, // 允许选择年份
- dateFormat:'yy-mm-dd', // 设置日期格式
- showClearButton: true,
- //clearText: '清除',
- closeText:'关闭', // 只有showButtonPanel: true才会显示出来
- duration: 'fast',
- showAnim:'fadeIn',
- showOn:'button',
- buttonImage: 'images/commons/calendar.gif',
- buttonImageOnly: true,
- buttonText:'选择日期',
- showButtonPanel: true,
- showOtherMonths: true,
- //appendText: '(yyyy-mm-dd)',
- onSelect: function(dateText, inst) // 使结束时间大于开始时间
- {
- /**
- * 以下写法在IE中出现问题。
- * $('#expDate').datepicker('option', 'minDate', new Date(dateText.replace(/-/g,',')));
- * 时，在结束（过期时间）选择时，年会没有，而且控制会失效。通过调试，发现new Date(dateText.replace(/-/g,','))
- * 返回的结果是NaN。说明Date对象不能这么构造（但是Firefox可以）
- */
- var arys = new Array();
- var arys = dateText.split('-');
- $('#expDate').datepicker('option', 'minDate', new Date(arys[0],arys[1]-1,arys[2]));
- }
- });
- $("#expDate").datepicker(
- {
- showMonthAfterYear: true, // 月在年之后显示
- changeMonth: true, // 允许选择月份
- changeYear: true, // 允许选择年份
- dateFormat:'yy-mm-dd', // 设置日期格式
- showClearButton: true, // 自定义的方法(1.7.2没有清除按钮）
- //clearText: '清除', // 自定义的文本，在文档在有定义（js中）
- closeText:'关闭', // 只有showButtonPanel: true才会显示出来
- duration: 'fast',
- showAnim:'fadeIn',
- showOn:'button', // 在输入框旁边显示按钮触发，默认为：focus。还可以设置为both
- buttonImage: 'images/commons/calendar.gif', // 按钮图标
- buttonImageOnly: true, // 不把图标显示在按钮上，即去掉按钮
- buttonText:'选择日期',
- showButtonPanel: true,
- showOtherMonths: true,
- //appendText: '(yyyy-mm-dd)',
- onSelect: function(dateText, inst)
- {
- var arys = new Array();
- var arys = dateText.split('-');
- $('#effDate').datepicker('option','maxDate',new Date(arys[0],arys[1]-1,arys[2]));
- }
- });
- });
$(function()
{
$("#effDate").datepicker(
{
showMonthAfterYear: true, // 月在年之后显示
changeMonth: true, // 允许选择月份
changeYear: true, // 允许选择年份
dateFormat:'yy-mm-dd', // 设置日期格式
showClearButton: true,
//clearText: '清除',
closeText:'关闭', // 只有showButtonPanel: true才会显示出来
duration: 'fast',
showAnim:'fadeIn',
showOn:'button',
buttonImage: 'images/commons/calendar.gif',
buttonImageOnly: true,
buttonText:'选择日期',
showButtonPanel: true,
showOtherMonths: true,
//appendText: '(yyyy-mm-dd)',
onSelect: function(dateText, inst) // 使结束时间大于开始时间
{
/**
* 以下写法在IE中出现问题。
* $('#expDate').datepicker('option','minDate', new Date(dateText.replace(/-/g,',')));
* 时，在结束（过期时间）选择时，年会没有，而且控制会失效。通过调试，发现newDate(dateText.replace(/-/g,','))
* 返回的结果是NaN。说明Date对象不能这么构造（但是Firefox可以）
*/
var arys = new Array();
var arys = dateText.split('-');
$('#expDate').datepicker('option','minDate', new Date(arys[0],arys[1]-1,arys[2]));
}
});
$("#expDate").datepicker(
{
showMonthAfterYear: true, // 月在年之后显示
changeMonth: true, // 允许选择月份
changeYear: true, // 允许选择年份
dateFormat:'yy-mm-dd', // 设置日期格式
showClearButton: true, // 自定义的方法(1.7.2没有清除按钮）
//clearText: '清除', // 自定义的文本，在文档在有定义（js中）
closeText:'关闭', // 只有showButtonPanel: true才会显示出来
duration: 'fast',
showAnim:'fadeIn',
showOn:'button', // 在输入框旁边显示按钮触发，默认为：focus。还可以设置为both
buttonImage:'images/commons/calendar.gif', // 按钮图标
buttonImageOnly: true, // 不把图标显示在按钮上，即去掉按钮
buttonText:'选择日期',
showButtonPanel: true,
showOtherMonths: true,
//appendText: '(yyyy-mm-dd)',
onSelect: function(dateText, inst)
{
var arys = new Array();
var arys = dateText.split('-');
$('#effDate').datepicker('option','maxDate',newDate(arys[0],arys[1]-1,arys[2]));
}
});
});
4、国际化
datepicher提供了国际化的功能。只需将ui.datepicker-zh-CN.js导入页面即可。（或者导入jquery-ui-i18n.js，该文件包含了很多中语言）注意，如果想使用上面提到的增强版datepicher1.7.2，则需要下载作者提供的国际化文件。另外，如果用Eclipse之类的工具编码，注意用eclipse打开国际化文件看看，很有可能显示为乱码。只需要把文件的编码格式改为utf-8，然后用其他编辑工具，如editplus打开国际化文件，拷贝，粘贴覆盖eclipse中的，保存就OK了。
5、国际化为中文可能遇到的显示问题
在使用国际化同时启用changeYear和changeMonth后，两个select显示为两行，很不好看。找了好久，发现在官方提供的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,
.ui-datepicker select.ui-datepicker-year { width: 47%;}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: left; }
就OK了
6、换肤
jQuery UI预定义了很多皮肤，下载后，只需在页面引入相应皮肤的jquery-ui-1.7.2.custom.css可以实现换肤。如果给用户提供换肤功能，可以通过js控制，实现换肤。
总结：
可以看出，datepicher是一个很好用的插件，比自己写的肯定要好用很多，推荐大家使用。
另外，在使用中，可以定义一个文件，包含该插件的使用，配置好。以后有需要使用的地方，引入该文件，同时传给当前需要使用日期选择控件的id属性，这样便可以只配置一次了。
第二个：
jQueryui之Datepicker(日期选择器)
文章分类:Web前端
本来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的ＡＰＩ，生成日期选择器
不多说，看代码应该都能明白：
Js代码
- $(function(){
- $(selector).datepicker(obj);
- }
- )
- /*
- *selector：jQuery选择器的表达式，一般是textfield，div，span的jQuery对象
- *obj：一个参数对象，包含了所有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类型），设置选择器日期上限。如：newDate(2100,0,1);
minDate：Date值（还可以是Number , String类型）， 设置选择器日期上限。如：newDate(1900,0,1);
注意：经过以上四步后，大家会发现生成出来的选择器与网上看到的选择器不一样，那是因为官方示例中，在页面配有CSS:body{ font: 62.5% "Trebuchet MS", sans-serif; margin:50px;}来控制字体的大小和字符集，而我在几翻折腾后在Datepicker的CSS开始处添加ui-datepicker-calendarth{font-family:宋体}，末尾处添加.ui-widget{font-size:62.5%}，便能生成与官网一模一样的选择器了。(这个css的配置仅供参考)
这样的Datepicker已经能够满足大部份的需求了，如果还有什么别的需求，就去jQuery ui 中碰碰运气，要不就看下jQuery plugins 。 不过jQuery plugins好像是其他用户修改ui后共享出来的版本，感觉没必要去用jQuery plugins 。官方发布的jQuery ui 已经满足大部份的需求了，当有额外需求再去找jQuery plugins 。
看起来比较好的：
$(function() {
$("#datepicker").datepicker({closeText: 'X',showButtonPanel: true,showClearButton:true,minDate: new Date(2009,7,10)});
});
$(function() {
$("#start-date").datepicker(
{onSelect: function(dateText, inst) {$('#end-date').datepicker('option', 'minDate',new Date(dateText.replace('-',',')));}
});
$("#end-date").datepicker(
{onSelect: function(dateText, inst) {$('#start-date').datepicker('option', 'maxDate', new Date(dateText.replace('-',',')));}
});
});
程序源码及更多DatePicker的用法实例下载：
/Files/yasin/Jquery_datepicker.zip
DatePicker官方地址：
http://docs.jquery.com/UI/API/1.7/Datepicker#method-option
2009-07-13 增加焦点失去后自动验证日期格式
_doblur:function(event)
{
var inst = $.datepicker._getInst(event.target);
if(inst.input[0].value.length==0)//允许为空
return;
var reg=/^(\d{4})(\/|-)(\d{1,2})\2(\d{1,2})$/;
var arr=inst.input[0].value.match(reg)
if(arr==null)
{
alert("错误的时间格式,请按格式填写\n 如: 2012-12-22");
var today=new Date();//设置为当前日期
inst.input[0].value=today.getYear()+"-"+(today.getMonth()+1)+"-"+today.getDate();
inst.input[0].focus();
return;
}
var tempDate=new Date(arr[1],arr[3]-1,arr[4]);
if((tempDate.getFullYear()==arr[1]&&(tempDate.getMonth()+1)==arr[3]&&tempDate.getDate()==arr[4])==false)
{
alert("错误的时间格式,请按格式填写\n 如: 2012-12-22");
var today=new Date();//设置为当前日期
inst.input[0].value=today.getYear()+"-"+(today.getMonth()+1)+"-"+today.getDate();
inst.input[0].focus();
return;
}
},