学步园

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

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

jquery的版本是：1.5.2

页面要引入的文件

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

页面中的JS部分

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

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

HTML部分

<div class="oplog_main_date"><br /> 选择日期：<input id="from" type="text" name="from">到<input type="text" id="to" name="to"/><br /> </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; }