jquery ui（五）日期选择器 datepicker
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、面板其他显示参数
|
可以是Date对象， 或者是数字（从今天算起，例如+7）， 或者有效的字符串('y’代表年, 'm’代表月, 'w’代表周, 'd’代表日, 例如：’+1m +7d')。 |
||
|
'September', 'October', |
||
|
'Oct', 'Nov', 'Dec'] |
(具体展现在下拉列表changeMonth) |
|
|
如果为整数则是显示月份的数量， 如果是数组[2, 3]，则是显示的行与列的数量。 |
||
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');