jQuery UI 日期选择器（Datepicker）使用总结
根据自己实际使用情况，本文简单介绍下jQuery UI的日期选择器（Datepicker）的使用实例，依次介绍以下三个功能：
1. 点击input文本框弹出时间选择框；
2. 点击右侧日历图标按钮弹出时间选择框；
3. 点击input文本框和日历图标都能弹出时间选择框。
点击input文本框弹出时间选择框
1.通过给元素绑定datepicker()事件触发日期选择器:$('#id').datepicker();
2.通过添加布尔值 changeMonth 和 changeYear 选项，显示月份和年份的下拉框，这样便于在大范围的时间跨度上导航：
changeMonth: true, //显示月份下拉框
changeYear: true, //显示年份下拉框3.通过添加选项dateFormat设置显示日期的格式：
dateFormat: 'yy-mm-dd', //如：2017-12-09
dateFormat: 'mm/dd/yy', //如：12/09/2017
dateFormat: 'd M, y', //如：9 Dec, 17
dateFormat: 'd MM, y', //如：9 December, 17
dateFormat: 'DD, d MM, yy', //如：Saturday, 9 December, 2017
dateFormat: ''day' d 'of' MM 'in the year' yy', //设置为任意自己想要的文本形式的，如：day 9 of December in the year 20174.通过 minDate 和 maxDate 选项限制可选择的日期范围：
① 限制可选择的开始日期为实际的日期：minDate: new Date('2017-10-01') 表示2017-10-01之前的日期不可选。
② 限制开始日期为与今天的一个数值偏移（-20）：maxDate: -20 表示从今天向后数超过20天的日期将不可选。
③ 限制开始日期为一个周期和单位的字符串（’+1M +10D’）：maxDate: "+1M +10D" 表示从今天向后数超过一个月零10天后的日期将不可选。可以使用’D’ 表示天，’W’ 表示周，’M’ 表示月，’Y’ 表示年。
源码示例如下：
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 日期选择器title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0-rc.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js">script>
<script src="//code.jquery.com/ui/1.12.0-rc.2/jquery-ui.js">script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
*{padding: 0;margin: 0;}
.date-wrapper{border-radius:5px;width: 158px;border:1px solid #ddd;height: 34px;position: relative;float: left;line-height: 34px;}
.date-inp{border-radius:5px;width: 100%;border: none;top: 0;left: 0;position: absolute;height: 34px;line-height: 34px;text-indent: 10px;color: #666666;font-size: 12px;}
.date-ic{right: -1px;top: -1px;z-index: 2; position: absolute;width: 34px;height: 36px;background: url("./images/dt-ic.png") no-repeat;}
.dt-wrapper{width: 765px;height: 510px;left: 50%;top: 50%;margin:-277px 0 0 -433px;position: fixed;padding: 21px 50px;background: #fff;border: 1px solid #ddd;}
.dt-wrapper img{vertical-align: middle;width: 765px;height: 510px;}
.dt-wrapper ul{height: 510px;position: absolute;}
style>
<script>
$(function() {
//点击开始时间选择框
$('#startDay').datepicker({
changeMonth: true, //显示月份下拉框
changeYear: true, //显示年份下拉框
dateFormat: 'yy-mm-dd', //设置日期显示格式为2017-12-09这种的，也可以选择其他的，比如“d M, y”格式的
onSelect: function(dateText, inst) { //在选择时，可以根据自己需求需要加些判断
if(new Date(dateText).getTime() < new Date('2017-10-01').getTime()){
alert('开始时间不得选择早于2017.10.01的时间');
//inst.lastVal 记录的是上次修改的值,相对于本次来讲，即在点击选择日期之前，文本框里显示的日期
//在触发本事件时，input框里的日期已经被改变了，所以不满足条件时，需要重新写回原来的日期
$('#startDay').val(inst.lastVal);
return false;
}
}
});
//点击结束时间选择框
$('#endDay').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
minDate: new Date('2017-10-01'),//限制可选择的开始日期为2017-10-01之后
maxDate: "-1D",//限制最大可选择日期为前一天的时间
onSelect: function(dateText, inst) { //在选择时，可以根据自己需要加些判断
var dateTextTime = new Date(dateText).getTime();
if(dateTextTime < new Date($("#startDay").val()).getTime()){
alert('截止时间不能小于开始时间');
$('#endDay').val(inst.lastVal);
return false;
}
}
});
});
script>
head>
<body>
<div style="width:500px; height:34px; margin:20px;line-height:34px;">
<span style="float: left;font-size: 12px;color: #333;margin-right: 6px;">
<i style="padding-left: 20px;">i>时间：
span>
<div class="date-wrapper">
<input type="text" class="date-inp" id="startDay" name="startDay" value="" autocomplete="off" readonly>
div>
<span style="margin: 0 5px;float:left;">-span>
<div class="date-wrapper">
<input type="text" class="date-inp" id="endDay" name="endDay" value="" autocomplete="off" readonly>
div>
div>
body>
html>实现效果如图：
点击右侧日历图标按钮弹出时间选择框
1.通过图表来显示 datepicker，需要设置以下三个选项实现：
showOn: "button", //通过按钮显示
buttonImage: "./images/dt-ic.png", //设置按钮图片
buttonImageOnly: true,设置以上三个选项后，会在input文本框后面添加一个如下img标签：
2.如果想要给按钮加上自己的样式，可以参照如下设置：$('.ui-datepicker-trigger').addClass('date-ic');表示给该图标新添加个类名为date-ic的样式。
3.还可以通过设置选项buttonText给该按钮添加标题，如设置buttonText: "startDay"后，就给图标加上了标题，如下：
4.若设置选项buttonImageOnly为false：buttonImageOnly: false，则会生成一个包含img标签的button标签，如下：
此时设置样式为：$('.ui-datepicker-trigger img').addClass('date-ic');
源码示例如下：