JQuery提供了很多控件, 例如用于选择日期的日期控件(Date Picker)。这些控件并没有随Jquery的核心库一并发布。而是作为一个叫做"JQuery UI"的子项目——或者叫做插件——的形式发布。
所以, 我们除了要在页面中引用jquery的那个js文件外, 还需要在http://jqueryui.com/下载与我们使用JQuery对应版本的JQuery UI的程序包。
目前, 最新的JQuery版本是1.3。 与这个版本对应的JQuery UI版本是1.6rc6。
由 于JQuery UI采取了显示和功能分离的设计(皮肤, 或者叫”换肤“)。所以, 我们需要为日期控件附加样式。JQuery UI最神奇的特点之一就是提供了一个网站来给我们修改控件的样式:http://jqueryui.com/themeroller/。在这个页面中, 将控件样式调整满意后, 点击左侧的"Download theme"按钮。就可以把样式下载下来了。现在, 下载的是JQuery UI1.6rc5版本所使用的样式库。如果您用的较低的1.5, 那么请注意在点击”Download theme“按钮后出现页面的右侧选择相应的版本。不然, 不同版本的样式是不兼容的。
将下载下来的zip包解开, 我们可以看到里面已经准备好我们要用jquery核心库和JQuery UI的库。首先, 我们把jquery-1.3.x.js复制到网站的js目录下,jquery-ui-personalized-1.6rc6.min.js、i18n目 录、theme目录复制到网站js/ui目录下。
JQuery核心库的安装非常简单, 我们把jquery.1.3.x.js文件引入页面即可。一般来说, 我们会把这个js文件改名为jquery.js, 放到“/js"目录下。
然后, 我们将jquery-ui-personalized-1.6rc6.min.js引入页面。如果觉得它的文件名太长。可以直接改成jquery- ui.js或者其他比较短的名字。
最 后, 引入分别引入js/ui/theme/ui.all.css样式表以及/js/ui/i18n/ui.datepicker-zh-CN.js脚本文件到 页面中。就完成了中文日期控件的安装。如果我们需要其他语言的空间, 请更换ui.datepicker-zh-CN.js文件。在js/ui/i18n中有很多其他语言的脚本。
终于, 我们可以在页面中,给某个输入框绑定一个日期控件了。例如, 我们的页面中有这么一个input:
<input type="text" id="birthday" name="birthday"/>
那么, 我们可以在$(document).ready()的事件函数(不懂的可以参见Jquery核心库的说明或者网上的相关资料)中写:$("birthday").datepicker();
现在打开页面, 如果不出意外。当我们点击这个文本框的时候就可以出现一个很炫的日期控件了。
现在修改一下:$("#bithday").attr("readonly", "true").datepicker(); 这样一来,用户就不能手工输入, 而只能通过控件选择日期了。
上面简单介绍了一下日期控件的使用方法。其实, 他们的可定制性是非常高的。今天我们只是使用了它们最简单最基本的功能。
$("#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)',
});