Blogger Scott

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、面板其他显示参数
 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');


posted on 2015-10-14 17:10 江天部落格 阅读(325) 评论(0)  编辑  收藏 所属分类: 综合类


只有注册用户登录后才能发表评论。


网站导航: