JQuery官方的Datepicker控件，可以很方便的使用，可以让用户很方便的在输入框上选择时间。
【调用代码】<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<p>Date: <input type="text" id="datepicker"></p>
【效果图】
下面介绍一下具体用法：
一、需要加载的js文件
(1)jquery.js
(2)jquery.ui.core.js
(3)jquery.ui.widget.js
(4)jquery.ui.datepicker.js
二、html代码
需要一个用来加载datepicker控件的输入框。
<input id = "date" type="text"/>
三、js代码
初始化函数：
$(.selecter).datepicker();
【参数】
因为参数较多，把所有参数根据功能分成几组进行阐述
1、动画
| duration | 'normal' | 设置日期控件展开动画的显示时间，可选是:
"slow", "normal", "fast"，''代表立刻，数字代表毫秒数。 |
| showAnim | 'show' | 设置显示、隐藏日期插件的动画的名称。 |
| showOptions | {} | 如果使用showAnim来显示动画效果的话，可以通过此参数来增加一些附加的参数设置。 |
2、图片按钮
| buttonImage | "" | 设置弹出按钮的图片，如果非空，则按钮的文本将成为alt属性，不直接显示。 |
| buttonImageOnly | false | 是否把按钮安全显示成图片的样子 |
| buttonText | "..." | 设置触发按钮的文本内容。 |
| showOn | 'focus' | 设置什么事件触发显示日期插件的面板，可选值：
focus, button, both(当为focus时，不显示图片按钮) |
3、选中之后时间格式
| dateFormat | mm/dd/yy | 设置日期字符串的显示格式。 |
| dayNames | ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday','Saturday'] | 设置一星期中每天的名称，从星期天开始。此内容用于dateFormat时显示，以及日历中当鼠标移至行头时显示。 |
| dayNamesMin | ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] | 设置一星期中每天的缩语，从星期天开始，此内容用于dateFormat时显示，以前日历中的行头显示 |
| dayNamesShort | ['Sun', 'Mon', 'Tue','Wed', 'Thu', 'Fri', 'Sat'] | 设置一星期中每天的缩语，从星期天开始， |
| navigationAsDateFormat | false | 如果设置为true，则formatDate函数将应用到 prevText,nextText和currentText的值中显示，例如显示为月份名称。 |
| constrainInput | true | 如果设置为true，则约束当前输入的日期格式。 |
4、面板底部的按钮控制
| showButtonPanel | false | 设置是否在面板上显示相关的按钮 |
| closeTextType | "done" | 设置关闭按钮的文本内容 |
| currentText | "today" | 设置当天按钮的文本内容 |
| gotoCurrent | false | 如果设置为true，则点击当天按钮时， |
| | | 将移至当前已选中的日期，而不是今天 |
5、可选中的时间范围
| maxDate | false | 设置一个最大的可选日期。可以是Date对象，或者是数字（从今天算起，例如+7），或者有效的字符串('y'代表年， 'm'代表月， 'w'代表周， 'd'代表日。 例如：'+1m +7d')。 |
| minDate | false | 设置一个最小的可选日期。可以是Date对象，或者是数字（从今天算起，例如+7），或者有效的字符串('y'代表年， 'm'代表月，'w'代表周, 'd'代表日, 例如：'+1m +7d')。 |
| yearRange | -10:+10 | 控制年份的下拉列表中显示的年份数量，可以是
(-nn:+nn)，也可以是绝对值 (-nnnn:+nnnn) |
| shortYearCutoff | '+10' | 设置截止年份的值。
如果是（0-99）的数字则以当前年份开始算起，当超过截止年份时，则被认为是上个世纪 |
6、面板中上一月 下一月按钮控制
| hideIfNoPrevNext | false | 设置当没有上一个/下一个可选择的情况下， |
| 隐藏掉相应的按钮。（默认为不可用） |
| nextText | 'Next' | 设置“下个月”链接的显示文字 |
| prevText | 'Prev' | 设置“上个月”链接的显示文字。 |
| stepMonths | 1 | 当点击上/下一月时，一次翻几个月。 |
7、面板其他显示参数
| firstDay | 0 | 设置一周中的第一天。星期天为0，星期一为1，以此类推。 |
| defaultDate | null | 设置默认加载完后第一次显示时选中的日期。可以是Date对象，或者是数字（从今天算起，例如+7），或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。 |
| changeMonth | false | 设置允许通过下拉框列表选取月份。 |
| changeYear | false | 设置允许通过下拉框列表选取年份。 |
| monthNames | ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August','September', 'October', 'November', 'December'] | 设置所有月份的名称 |
| monthNamesShort | ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep','Oct', 'Nov', 'Dec'] | 设置所有月份的缩写。
(具体展现在下拉列表changeMonth) |
| numberOfMonths | 1 | 设置一次要显示多少个月份。
如果为整数则是显示月份的数量，如果是数组[2, 3]，则是显示的行与列的数量。 |
| showCurrentAtPos | 0 | 设置当多月份显示的情况下，当前月份显示的位置。自顶部/左边开始第x位。 |
| showMonthAfterYear | false | 是否在面板的头部年份后面显示月份。 |
| showOtherMonths | false | 是否在当前面板显示上、下两个月的一些日期数（不可选）。 |
| isRTL | false | 如果设置为true，则所有文字是从右自左。 |
| appendText | null | 在日期插件的所属域后面添加指定的字符串 |
8、同步显示到其他input
| altField | null | 将选择的日期同步到另一个input中，配合altFormat可以显示不同格式的日期字符串。 |
| altFormat | '' | 当设置了altField的情况下，显示在另一个input中的日期格式。 |
四、其他1、事件
（1）create 加载的时候此事件将被触发function(event, ui)
（2）beforeShow 展示之前此事件将被触发 function(event, ui)
（3）beforeShowDay 展示日期之前事件将被触发 function(date)
（4）onChangeMonthYear 月份或者年份的时候此事件将被触发function(year, month, ui)
（5）onClose 关闭的时候此事件将被触发 function(dateText, ui)
（6）onSelect 选中的时候此事件将被触发function(dateText, ui)
【示例】
$('.selector').datepicker({
create: function(event, ui) { alert('has create!!'); }
});
2、方法
(1)destory 销毁 .datepicker( "destroy" )
(2)disable 不可用 .datepicker( "disable" )
(3)enable 可用 .datepicker( "enable" )
(4)option 获取参数 .datepicker( "option", optionName )
(5)option 设置参数 .datepicker( "option" , optionName , [value] )
(6)widget 返回这个element .datepicker( "widget" )
(7)getDate获取date .datepicker( "date" )
(8)setDate设置date .datepicker( "setDate", date )
【示例】
//设置进度条新值
$("#divProgressbar").datepicker( "setDate", '+1m +7d');