42-解决方案

选择背景色：黄橙洋红淡粉水蓝草绿白色选择字体：宋体黑体微软雅黑楷体选择字体大小：小中大特恢复默认

11.10.2　解决方案

jQuery UI的日期选择器（Datepicker，http://jquery-cookbook.com/go/plugin-datepicker）能够解决上述问题，它提供了日历和许多对各种应用程序进行优化的自定义选项。

默认的日期选择器只要简单地应用到输入字段即可生效：

<label for="startAt">Start at:</label>
<input type="text" name="startAt" id="startAt" />
$("#startAt").datepicker();

上述代码将绑定必要的事件，在输入字段获得焦点时显示日期选择器，默认日期是当前日期。Next和Previous按钮可以用于选择下一个月或者上一个月，月历则用来选择具体的日期。

为了更好地使用日期选择器，需要使其适应于应用程序。对于航班搜索的例子，可以假定用户搜索后三个月内的航班，因此，它一次性显示从当前日期下一周开始的三个月：

<label for="from">From</label>
<input type="text" id="from" name="from"/>
<label for="to">to</label>
<input type="text" id="to" name="to"/>

从两个输入字段开始，这两个字段都与相应的标签关联，然后向二者应用日期选择器：

var dates = $('#from, #to').datepicker({
　　 defaultDate: "+1w",
　　 changeMonth: true,
　　 numberOfMonths: 3,
　　 onSelect: function(selectedDate) {
　　　　　var option = this.id == "from" ? "minDate" : "maxDate";
　　　　　dates.not(this).datepicker("option", option, new Date(selectedDate));
　　 }
});

日期选择器的默认日期是当前日期加上一周，用 defaultDate 选项指定。通过 changeMonth: true 还显示了修改月份的一个选择列表。选项 numberOfMonths: 3指定同时显示3个日历。

onSelect 选项是用户选择日期时触发的一个事件。当起始日期选定时，把结束日期的 minDate 选项设置为起始日期，当结束日期选定时，设置起始日期的 maxDate 选项。

这样，用户可以任意选择两个日期，与选择另一个日期时，输入已经限制在明确的范围内。

Previous 上一篇本节目录 Next 下一篇

42-解决方案

11.10.2 解决方案

11.10.2　解决方案