jquery ui datepicker使用和下载地址

先堆几个地址：

JQuery官方地址：http://jquery.com/
你可以在这里下载到JQuery的核心框架的最新版本，包括未压缩的和已压缩的，不压缩的话有98K，简装压缩版只有15K

Datepicker的演示地址：http://ui.jquery.com/repository/latest/demos/functional/#ui.datepicker
包括自定义格式，资源本地化等，都有相应的源代码。

Datepicker的下载地址：http://ui.jquery.com/download_builder/
包括UI系列组件的下载地址，你可以在左边选择不同版本以及是否压缩，以何种方式压缩。这个页面的好处在于，你可以完全订制自己的脚本，本例中我们只需要Datepicker，所以只下载这一个和最上面的UI Core(The core of jQuery UI, required for all interaction modules and widgets)即可，它是所有UI插件的核心，不能不下。我是把它们两个分开下载的。78K的Datepicker压缩后只有23K。

Datepicker的皮肤(CSS):http://marcgrabanski.com/pages/code/jquery-ui-datepicker
演示页面：http://marcgrabanski.com/article/jquery-ui-datepicker-themes

给个图：

 

OK，接下来堆代码：

页首应有

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >

这个如果用vs2005/08都会自动生成

然后在head节中加入：

 

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> < link  href ="/js/ui.datepicker.css"  rel ="stylesheet"  type ="text/css"   />
<!--  css样式 3.72K -->
< script  src ="/js/jquery-1.2.6.pack.js"  type ="text/javascript" ></ script >
<!--  压缩后的jquery核心文件 30.3K -->
< script  src ="/js/jquery-ui-core-1.5.2.js"  type ="text/javascript" ></ script >
<!--  压缩后的ui-jquery核心文件 7.47K -->
< script  src ="/js/jquery-ui-datepicker.js"  type ="text/javascript" ></ script >
<!--  压缩后的datepicker脚本文件 22.7K -->
< script  src ="/js/ui/jquery.ui.i18n.all.js"  type ="text/javascript" ></ script >
<!--  多国语言的脚本文件 47.4K -->

 

 在body节中加入：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->      < script type = " text/javascript "  language = " javascript " >
        $(document).ready( function () {
            $( " #<%=TextBox_PublishDate.ClientID %> " ).datepicker($.extend({}, $.datepicker.regional[ " zh-CN " ], {
                showStatus:  true ,
                showOn:  " both " ,
                buttonImage:  " /images/small/calendar.gif " ,
                buttonImageOnly:  true
            }));
        });
     < / script>

 

最后，你应该有一个ID为TextBox_PublishDate的服务端控件。

完成效果：

在使用过程中可能会有以下问题：

1,没有加入页面载入代码：
应该在演示所提供的代码外层加上：        $(document).ready(function() {...[demo code]...});
害得我调试了很久。

2,本地化的问题：
打包下载的datepicker所带的i18n的脚本文件是分开放的，每种语言一个文件，不过在页面中引用也无法使界面中文化，无奈只好研究demo页面的代码，发现它引用的只有一个i18n文件，所以下载了UI网站上的这个文件，不过文件有点大，这个解决方法等有时间再研究。
PS：演示页面中的中文化在Chrome下也无法正常显示。

3,压缩效果：
以前用其它插件时有的压缩后是不能用的，不过总体来说压缩后的效果很好。

4,官方皮肤问题：
官方的默认界面显示似乎在IE7下有点问题，建议用第三方CSS。

5,与ASP.NET验证控件冲突
如果datepicker的目标控件是ASP.NET服务端控件（如上例），那么这时如果有一个类似RequiredFieldValidator的验证控件的ControlToValidate属性也指向它的话。在使用中会产生如下问题：选择日期后，控件不消失，浏览器报：“length属性为空”的错误。

 

希望本文能对您有所帮助！