在web开发中,日期的输入经常会遇到。我们会用的解决方法有:
1、自己写css和js,对日期进行控制;----有点浪费精力和时间;
2、用easyui插件中的日期插件来实现;
3、用juqery-ui中的日期控件--datepicker来实现。
今天,我们注重学习下标题上提到的日期控件,juqery-ui-datepicker控件。对于easyUI有感兴趣的,可以寻找资料继续研究。
datepicher插件是jQuery UI的一个插件,它提供一个日期弹出窗口(或直接显示在页面),供用户选择日期。
datepicker插件使用的具体语法:
$("#id").datepicker(optional);
标注:optional是一个对象,该对象的每个属性及含义和方法可以参考API官方网站:http://jqueryui.com/datepicker/
具体用法:
1、简单的js代码:
$("#id").datepicker();
id:页面上日期输入框的id
生成的日期框描述:在日期输入框获得焦点时,就会弹出一个日期选择窗口。然而,这时候的日期选择窗口有很多不方便的地方,比如:只能一个月一个月的往前或往后,没有关闭按钮等
2、添加配置后的代码:可以改变一些默认设置,如下的可以选择年份和月份
$("#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)
$(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]));
}
});
});
datepicher1.7.2版本没有提供清除按钮,这让人有点遗憾。(好像之前的版本有提供)。没有清除按钮是很不方便的,特别是输入框获得焦点就弹出日期选择窗口的情况更是如此,因为这时想要清除输入框中的日期比较麻烦。在此推荐一位网友提供的增强版datepicher1.7.2。该增强版datepicher1.7.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控制,实现换肤。
建议:在使用中,可以定义一个文件,包含该插件的使用,配置好。以后有需要使用的地方,引入该文件,同时传给当前需要使用日期选择控件的id属性,这样便可以只配置一次了。
http://www.cnblogs.com/yasin/archive/2009/07/10/1520736.html