Datepicker使用说明.docVIP

Datepicker使用说明 DatePicker使用简单说明 Datepicker是jqueryui插件中的一个，所以使用Datepicker的时候需要引入jquery.js文件。 Jqueryui官方网站提供了许多中样式，你可以通过选择不同的css样式下载使用。 Datepicker的使用实例 $(document).ready(function(){ $(.selector).datepicker(); }); 以上代码就可以实现datepicker的效果。如果需要更多选项，可以通过如下代码 $(document).ready(function(){ $(#Schedule).datepicker({ dateformat:yy-mm-dd, changeMonth:true, changeYear:true, onSelect:function(date,inst){ .... } }); }); 更多选项，可以查看jqueryui官方网站。网站地址可以在附录中查找。 Datepicker本地化 Datepicker使用中默认是英文的。如果想修改为你所熟悉的语言，可以通过下载本地化js文件，实现Datepicker本地化设置。 本地化文件下载地址: /svn/trunk/ui/i18n/ 中文js下载地址:/svn/trunk/ui/i18n/jquery.ui.datepicker-zh-CN.js 使用实例使他支持中文 引入jquery.js、jquery-ui.js、jquery.ui.datepicker-zh-CN.js。 $(document).ready(function(){ $(.selector).datepicker(); $(.selector).datepicker($.datepicker.regional[zh]); }); 说明:本地化的代码一定要放在datepicker初始化之后，否则设置的datepicker可能会出现异常情况。 Datepicker中文本地化后样式问题 Datepicker中文化后，设置ChangeMonth、changeYear为true后，样式会出现不兼容问题。如右图。 解决方案： 在官方提供的jquery-ui-1.7.2.custom.css中，需要修改的地方是：?.ui-datepicker .ui-datepicker-title select { float:left; font-size:1em; margin:1px 0; }?.ui-datepicker select.ui-datepicker-month-year {width: 100%;}?.ui-datepicker select.ui-datepicker-month,?.ui-datepicker select.ui-datepicker-year { width: 49%;}?.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: right; }?应该改为：? .ui-datepicker .ui-datepicker-title select {font-size:1em; margin:1px 0; }????.ui-datepicker select.ui-datepicker-month-year {width: 100%;}????.ui-datepicker select.ui-datepicker-month{margin-left:4px;}.ui-datepicker select.ui-datepicker-month{ width: 40%;vertical-align:top;}.ui-datepicker select.ui-datepicker-year { width: 43%;vertical-align:top;} .ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: left; }????ui-datepicker-title{vertical-align:middle;} 这样样式就没有问题了。 OnSelect事件 官方解释:Allows you to define your own event when the datepicker is selected. The function receives the selected date as text and the datepicker inst