jQueryUI Datepicker的使用

jQueryUI Datepicker是一个高度可定制的插件,可以很方便的为你的页面添加日期选择功能,你可以自定义日期的显示格式

以及要使用的语言。

你可以使用键盘的快捷键来驱动datepicker插件:

pageup/down - 上一个/下一个月

ctrl+pageup/down - 上一年/下一年

ctrl+home- 当前月份

ctrl+up/down- 前一天/后一天

enter- 接受当前选定的日期

ctrl+end- 关闭日期插件的显示,并清除选定的日期

escape- 关闭日期插件,并不会清除已选择的日期

以上是jQuery官方文档中给出的关于datepicker描述中的一段内容翻译。

datepicker组件的使用是比较简单的,在使用时首先要将jQuery的js文件引入:

<linkrel="stylesheet" type="text/css"href="css/base/jquery.ui.all.css" />

<scripttype="text/javascript" src="js/jquery-1.4.4.min.js"></script>

<scripttype="text/javascript"src="js/jquery-ui-1.8.7.custom.min.js"></script>

<linkrel="stylesheet" type="text/css" href="demos.css"/>

注意引入文件的顺序,一定要先引入jquery.min.js,然后再引入jquery-ui.min.js,否则会报错

<script>

  $(document).ready(function() {

    $("#datepicker").datepicker();

  });

  </script>

</head>

<body>

    <input type="text"id="datepicker">

    </input>

</body>

此时打开页面,点击页面中的input标签,就会弹出日期选择的控件了。如图所示:

仅仅一行js代码就完成了datepicker组件的使用,当页面中的input元素得到焦点时就会弹出日期插件了。

但是,此时弹出的日期控件一切都是按照默认的设置显示的,比如语言,我们点击div,在弹出的日历插件

中可以看到日期的月份,年,星期都是英文的显示,所以为了方便使用,我们需要做一些本地化的操作。

jquery同样为我们提供了一些本地化的js文件,这些文件在ui文件夹里的i18n文件夹下,这里我们选择

简体中文的本地化文件:jquery.ui.datepicker-zh-CN.js,将此文件引入再次点击input,就可以看到我们

熟悉的中文了。

<scripttype="text/javascript" src="ui/i18n/jquery.ui.datepicker-zh-CN.js"></script>

如图:

在引入了显示中文的js文件后,我们会发现日期的显示格式发生了变化,由原来默认的yyyy/mm/dd的格式

转变成了yyyy-mm-dd,那么如果我们使用中文后依然想使用形如:yyyy/mm/dd的显示格式,或者其他自定义的

显示格式时该如何操作?使用dataFormat属性就可以了,

$("#datepicker").datepicker({

    dateFormat:'yy/mm/dd'

});

效果如图:

请注意dateFormat的值是:yy/mm/dd,只有两个yy,而不是4个,如果写成了yyyy/mm/dd,那么年份会显示两遍。

现在一个日期选择控件的基本功能就已经都实现了,可以选择日期,可以定制显示格式和语言。

接下来让我们来更深入的了解一些其他的功能,以满足项目中不同的需求。

首先来说日期选择的限定,比如我们让用户只能指定范围的日期,超出这个范围的都不允许选择,

例如我们限定用户只能选择当前日期的前10天和后10天之内的日期,其他时间都不允许选择,可以这样来操作:

$("#datepicker").datepicker({

    minDate: -10,

    maxDate: "+1W +3"

});

效果如图:

大家可以看到,我写文档的当天是11月20号,向前的日期只能选择到11月10日,而11月10日以前的日期灰显了,不能选择。

在上面的代码中使用minDate来限定用户所能选择的最小的日期,-10表示以当前日期减10天,比如今天19日,那么

用户所能选择的最小日期就是9日,也就是以当前日期向前推10天。10天以前的将不允许选择了。

而maxDate我们使用了"+1W +3"这样的表达式,这个表达式的意思是:从当前日期开始算,用户可以选择的最大日期

为:当前日期+10天,和那个minDate中的-10差不多,只不过一个前推10天,一个后推10天而已。只是两种限定使用

的表达方式不一样,在第二种方式中,+代表从当前日期向后推指定天数,1W,代表一个星期,也就是7天,+3表示后推

3天,我们将设当前日期为19日,那么maxDate的限定就是:由当前日期向后推一个星期(7天),再后推3天,加起来就是

10天了。所以这个表达式也可以使用+10来替代。效果完全一样。但是第二种表达式有其特有的优势,就是不用花时间去

计算要后推的天数,除了在上述表达式中用的W代表星期之外,还有其他的一些字母分别代表不同的含义:

比如M代表月,D代表天,Y代表年,

如果我们要限定的maxDate为从当前日期向后推一年半,如果使用数字直接指定,首先要算一年有多少天,然后还要算第二年

的半年有多少天,很是麻烦。

使用第二种方式我们就可以如下指定:

maxDate:"+1Y+6M",这就是表示后推1年零6个月。

 

同时我们还可以使用按钮控件来帮助用户选择日期,形式如下:

$("#datepicker" ).datepicker({

    showButtonPanel: true

});

显示效果如下:

这样就会在日期控件底部显示两个按钮,一个当前日期,一个完成,当用户选择一个日期,单击完成后就会选择日期了。

但是当前日期那个按钮点击后可能会没反映,并没有选中任何日期,而jquery在这个按钮上的实现也并没有让任何的日期

处于选中状态,它的作用只有一个,就是当你点开了日期控件,选了其他的月份或者年份,但是突然又想回到当前的日期面板,

那么点击这个按钮可以快速切换到当前的日期面板。

 

我们还可以使用下拉列表的形式来让用户选择月份和年份,使用形式如下:

$("#datepicker" ).datepicker({

    changeMonth: true,

    changeYear: true

});

显示效果如下:

设置了changeMonth和changeYear属性后会在年份和月份那里显示下拉列表来快速选择,而不用每次点击那个小箭头来向前或

向后选择日期了。

 

jquery还提供了星期的计算功能。当我们打开日期控件时,在控件左侧会显示这个月中的每个星期是今年的第几个星期。

使用形式如下:

$("#datepicker" ).datepicker({

    showWeek: true,

    firstDay: 1

});

效果如图:

日期左侧的44,45那些数字代表当前这个星期是今年的第几个星期。

 

同时我们也可以设置一次性的显示多个月份来同时供用户选择:

$("#datepicker" ).datepicker({

    numberOfMonths: 3,

    showButtonPanel: true

});

上述的代码会显示三个月份的日期,numberOfMonths属性设置要显示的日期的个数。

效果图:

有的日期控件会在输入框后提供一个小图标,当用户点击图标时才显示日期控件,jquery同样也可以:

$("#datepicker" ).datepicker({

    showOn: "button",

    buttonImage:"images/calendar.gif",

    buttonImageOnly: true

});

上述的代码中,首先使用showOn属性来显示按钮,然后为按钮设置图标buttonImage就是为按钮设置图标的,其值为:

按钮图标的路径。最后一个buttonImageOnly属性,用来表示只有当用户点击按钮时才显示日期控件,而点击输入框不会再有任何显示了。

效果如下:

下面再来说说将日期控件作为一个日期显示牌,显示在网站上,而不是让用户来选择,我们可能会想让我们的页面中的某个部分

显示一个日历,标志出当前的年份月份以及星期。这时候我们可以用一个div来替代<input>标签 。

<divid="datepicker"></div>

$("#datepicker").datepicker();

这样就会有一个静态的日历显示在这个div中了。可以让你的网站用户一目了然的看到当前的日期

效果图:

datepicker的使用大概就是这样。当然,还有一些细节的东西,我没有说到,虽然是一个简单的简单的控件,但是由于扩展性和

可定制性较高,仍然有许多的高级特性是我没说到的。如果想自定义一些显示规则或者想学其他一些深层次的用法还是把官方的

API好好的看看吧,虽然都是英文,但是并不难,都是编程里常用的词汇而已。那样你会到更多。

posted @ 2013-10-25 10:22  sunshine_kaka  阅读(1266)  评论(0编辑  收藏  举报