jquery ui(五)日期选择器 datepicker
JQuery官方的Datepicker控件,可以很方便的使用,可以让用户很方便的在输入框上选择时间。
废话少说,现在进入正题
一、国际惯例,先上实例
1、代码
$(function(){
$("#datepicker").datepicker();
});
</script>
Date:<input id="datepicker" type="text"/>
2、效果
二、具体用法
1、需要加载文件
(1)jquery.js
(2)jquery.ui
(3)jquery.ui的css
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"
rel="stylesheet"/>
2、页面上的HTML代码
需要一个用来加载datepicker控件的输入框
3、js代码
最简单的初始化函数:
4、datepicker()的参数
datepicker非常强大,所以也提供了很多使用的参数,先看一个复杂一点的例子,然后再介绍参数。
$(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>
效果如下(灰色部分表示不能选择)
因为参数较多,把所有参数根据功能分成几组进行阐述
(1)、动画
“slow”, “normal”, “fast”,”代表立刻,数字代表毫秒数。 |
||
(2)、图片按钮
“” |
||
focus, button, both(当为focus时,不显示图片按钮) |
(3)、选中之后时间格式
设置日期字符串的显示格式。 |
||
'Saturday'] |
||
'Wed', 'Thu', 'Fri', 'Sat'] |
||
prevText,nextText和currentText的值中显示,例如显示为月份名称。 |
||
(4)、面板底部的按钮控制
将移至当前已选中的日期,而不是今天 |
(5)、可选中的时间范围
或者是数字(从今天算起,例如+7), 或者有效的字符串(‘y’代表年, ‘m’代表月, |
||
或者是数字(从今天算起,例如+7), 或者有效的字符串(‘y’代表年, ‘m’代表月, ‘w’代表周, ‘d’代表日, 例如:’+1m +7d’)。 |
||
(-nn:+nn),也可以是绝对值 (-nnnn:+nnnn) |
||
如果是(0-99)的数字则以当前年份开始算起, 当超过截止年份时,则被认为是上个世纪 |
(6)、面板中上一月 下一月按钮控制
隐藏掉相应的按钮。(默认为不可用) |
||
(7)、面板其他显示参数
可以是Date对象, 或者是数字(从今天算起,例如+7), 或者有效的字符串(‘y’代表年, ‘m’代表月, ‘w’代表周, ‘d’代表日, 例如:’+1m +7d’)。 |
||
'September', 'October', |
||
'Oct', 'Nov', 'Dec'] |
(具体展现在下拉列表changeMonth) |
|
numberOfMonths |
如果为整数则是显示月份的数量, 如果是数组[2, 3],则是显示的行与列的数量。 |
|
(8)、同步显示到其他input
配合altFormat可以显示不同格式的日期字符串。 |
||
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)
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