jqueryui（五）日期选择器

JQuery官方的Datepicker控件，可以很方便的使用，可以让用户很方便的在输入框上选择时间。

废话少说，先上实例

【代码】

<script>
    $(function(){
       $( "#datepicker" ).datepicker();
    });
 </script>

<p>Date: <inputtype="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、面板其他显示参数

 

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');