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版本!
4、jqueryui中的css样式,基于不同的图片!你可以通过下载不同的样式文件Theme,来使用各种各样的Datepicker!
5、对于不同的网站,需要不同的语言版本,当然,你完全可以自己修改属性,来达到中文(或者各种你希望的语言)效果!但是,你也可以通过访问http://jquery-
ui.googlecode.com/svn/trunk/ui/i18n/来下载不同的本地化文件!达到相同的目的!中文的下载路径是:http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/jquery.ui.datepicker-zh-CN.js
6、关于datepicker的说明,请访问http://jqueryui.com/demos/datepicker/#option-changeYear的Options选择的,点击你感兴趣的属性进行查看!
7、引入相应的jquery.js jquery.ui.js jquery.ui.css后,使用就相当简单了,你只需要建立一个<input type="text" id="txtDate" />然后在head中添加
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#txtDate").datepicker();
});
</script>
这样你就可以看见Datepicker的效果了!简单吧!
如果想达到别的效果,如:修改时间样式 可以在datepicker()方法中添加相应的属性,例如 $("#txtDate").datepicker({dateFormat: 'yy-mm-dd'}),这样,时间的样式就变成了“年-月-日”了,其他
的属性修改类似,就不一一介绍了!如果想知道更多,你可以查看原网站的介绍,或者自己查看js文件!
最后提供一些css样式文件吧
http://ishare.iask.sina.com.cn/f/13036971.html
该文件里包括datepicker需要的相应的js css 图片等!
补充说明:20110718
1、设置jquery DatePicker的宽度,关于更多样式的修改可以查看相应的jquery的css样式。
<style>
.ui-datepicker
{
width:185px;
}
</style>
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"); }
})
通过简单设置,可以设置选中日期后的相关操作。
评论