jquery ui(五)日期选择器 datepicker

82550495 2013-08-12

JQuery官方的Datepicker控件,可以很方便的使用,可以让用户很方便的在输入框上选择时间。
废话少说,现在进入正题

一、国际惯例,先上实例

1、代码

<script>
    $(function() {
        $( "#datepicker" ).datepicker();
    });
</script>
Date: <input id="datepicker" type="text" />

2、效果

jquery ui(五)日期选择器 datepicker

jquery-ui-datepicker截图–ifxoxo.com

二、具体用法

1、需要加载文件

(1)jquery.js
(2)jquery.ui
(3)jquery.ui的css

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="

2、页面上的HTML代码

需要一个用来加载datepicker控件的输入框

<input id="date" type="text" />

3、js代码

最简单的初始化函数:

$(.selecter).datepicker()

4、datepicker()的参数

datepicker非常强大,所以也提供了很多使用的参数,先看一个复杂一点的例子,然后再介绍参数。

<script type="text/javascript">
    $(function() {
        $( "#datepicker" ).datepicker({
        changeMonth:true,  //月份下拉列表
        changeYear: true,  //月份下拉列表
        minDate: "-5d",   //可选最小日期
        maxDate: "+10d",  //可选最大日期
        showOn: "both",    //点击图片和输入框都弹出面板
        buttonImage:"calendar.gif",
        buttonImageOnly:true,
        showButtonPanel: true, //显示面板底部按钮
        closeTextType:"close", //关闭按钮文字
        currentText: "today",   //返回今天按钮文字
        dateFormat:"yy-mm-dd",
        dayNamesMin:['Sun','Mo','Tu','We','Th','Fr','Sa'],
        beforeShow: function(event, ui) { //打开窗口之前
           alert('this is from ifxoxo.com'); 
        }//其他参数详见下面
    });
    });
</script>

效果如下(灰色部分表示不能选择)

jquery ui(五)日期选择器 datepicker

jquery-ui-datepicker 一个复杂的例子–ifxoxo.com

因为参数较多,把所有参数根据功能分成几组进行阐述

(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中的日期格式。

5、datepicker的方法和事件

(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({
beforeShow: function(event, ui) { alert4'has create!!'); }
});

6、方法

(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 )

//设置日期
$(".selector").datepicker( "setDate", '+1m +7d');

三、其他jquery-ui文章

1、jquery ui(一)简介
2、jquery ui(二)拖拽 draggable和droppable
3、jquery ui(三)弹出窗口 dialog
4、jquery ui(四)进度条 progressbar
5、jquery ui(五)日期选择器 datepicker

相关推荐