Datepicker - 简单的使用说明

下载地址是：http://jqueryui.com/demos/datepicker/

我现在使用的版本是：jquery-ui-1.8.11.custom

jquery的版本是：1.5.2

 

页面要引入的文件

ui-lightness/jquery-ui-1.8.11.custom.css jquery-1.5.2.min.js jquery-ui-1.8.11.custom.min.js ui/jquery.ui.core.js ui/jquery.ui.widget.js ui/jquery.ui.datepicker.js 

 

页面中的JS部分

$(function() { var dates = $( "#from, #to" ).datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 1, onSelect: function( selectedDate ) { var option = this.id == "from" ? "minDate" : "maxDate", instance = $( this ).data( "datepicker" ), date = $.datepicker.parseDate( instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings ); dates.not( this ).datepicker( "option", option, date ); } }); $( "#from" ).datepicker( "option", "dateFormat", "yy-mm-dd" ); $( "#from" ).datepicker( "option", "maxDate", "d" ); $( "#to" ).datepicker( "option", "dateFormat", "yy-mm-dd" ); $( "#to" ).datepicker( "option", "maxDate", "d" ); });  

上面这段代码中，“numberOfMonths: 1”为显示的月的个数（目前为显示1个月）；“$( "#from" ).datepicker( "option", "dateFormat", "yy-mm-dd" );”为设置输出到文本框中的日期的格式；“$( "#from" ).datepicker( "option", "maxDate", "d" );”为显示的最大日期。

 

HTML部分

<div class="oplog_main_date"> 选择日期：<input id="from" type="text" name="from">到<input type="text" id="to" name="to"/> </div> 

 

另外，默认的日历字体挺大的，要改的话需要修改加载的那个CSS文件。修改位置如下：

.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; } 

在这段CSS的最后定义一下字体的大小即可：

.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; font-size:12px; }