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; }