使用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，所以只下载这一个和最上面的U
先堆几个地址：
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，接下来堆代码：
页首应有
<html xmlns="http://www.w3.org/1999/xhtml">
这个如果用vs2005/08都会自动生成
然后在head节中加入：
<!-- 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节中加入：
$(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属性为空”的错误。
希望本文能对您有所帮助！
