Jquery插件datepicker的CSS使用说明与样式修改方法

1、Jquery插件的官方网站是：http://jqueryui.com

2、datepicker是jqueryui中的小工具(widgets)

3、datepicker的demo网址：http://jqueryui.com/demos/datepicker

4、下载datepicker的demos等，网址：http://jqueryui.com/download,通过选择不同的Theme(样式)，得到不同的demo实例

5、jqueryui是基于jquery类库，创建的插件！，使用时必须引入相应的jquery版本！

6、jqueryui中的css样式，基于不同的图片！你可以通过下载不同的样式文件Theme，来使用各种各样的Datepicker!

7、对于不同的网站，需要不同的语言版本，当然，你完全可以自己修改属性，来达到中文（或者各种你希望的语言）效果！但是，你也可以通过访问http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/来下载不同的本地化文件!达到相同的目的！中文的下载路径是：http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/jquery.ui.datepicker-zh-CN.js

8、关于datepicker的说明，请访问http://jqueryui.com/demos/datepicker/#option-changeYear的Options选择的，点击你感兴趣的属性进行查看！

9、引入相应的jquery.js jquery.ui.js jquery.ui.css datepicker-zh-CN.js后，使用就相当简单了，你只需要建立一个




然后在head中添加




这样你就可以看见Datepicker的效果了！简单吧！

如果想达到别的效果，如：修改时间样式 可以在datepicker()方法中添加相应的属性，例如




这样，时间的样式就变成了“年-月-日”了，其他的属性修改类似，就不一一介绍了！如果想知道更多，你可以查看原网站的介绍，或者自己查看js文件！



补充说明：

样式修改

1、设置jquery DatePicker的宽度，关于更多样式的修改可以查看相应的jquery的css样式。




2、设置datepicker的本地化方法，下载相应的本地化文件(.js)，引入后设置本地化

$.datepicker.setDefaults($.datepicker.regional['']);
例如:$("#datepicker").datepicker($.datepicker.regional['zh']);

本地化文件下载地址：http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/


3、修改datepicker的选中后的事件

$("#datepicker").datepicker({ onSelect: function (dateText, inst) { alert("this is a event"); }
})

通过简单设置，可以设置选中日期后的相关操作。