当前位置: 代码迷 >> Web前端 >> jQuery Datepicker 日期取舍插件
  详细解决方案

jQuery Datepicker 日期取舍插件

热度:554   发布时间:2012-10-11 10:16:10.0
jQuery Datepicker 日期选择插件
在Web开发中,总会遇到需要用户输入日期的情况。一般都是提供一个text类型的input供用户输入日期。然而,这种方式,开发人员必须对用户输入的日期进行验证,判断其合法性。除此之外,用户输入日期也是一件不爽的事,如果用户可以直接选择日期,这两个问题都解决了。听起来很不错。实际上,很多开发者都是这么做的。

我们可以自己用javascript写一个日期选择控件,然而,想要写的很好、很漂亮却需要花不少时间和精力。jQuery有一个UI插件:datepicher,可以帮我们实现该功能,而且界面很漂亮。下面就学学如何使用它吧。

datepicher插件是jQuery UI的一个插件,它提供一个日期弹出窗口(或直接显示在页面),供用户选择日期。

datepicher插件的使用很简单,语法如下:
$("#regDate").datepicher(optional);

其中optional是一个对象,该对象的每一个属性及含义可以参看官方文档:http://jqueryui.com/demos/datepicker/。在此,仅介绍一些常用的属性。

1、datepicher最简单的使用

$("#regDate").datepicher();

其中,regDate是页面日期输入框的ID属性值。
就这一句话,在日期输入框获得焦点时,就会弹出一个日期选择窗口。然而,这时候的日期选择窗口有很多不方便的地方,比如:只能一个月一个月的往前或往后,没有关闭按钮等。

2、配置datepicher

通过给datepicher设置一些属性值可以改变默认的显示。如:

$("#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的使用已经相当完美:

$(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]));
    }
});
});

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 { 100%;} 
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { 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 { 100%;} 
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { 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属性,这样便可以只配置一次了。

本文出自:徐新华polaris
  相关解决方案