JQuery 日期控件

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)',
    });