达州做网站
大橙子网站建设，新征程启航
为企业提供网站建设、域名注册、服务器等服务
jqueryui（五）日期选择器datepicker
JQuery官方的Datepicker控件，可以很方便的使用，可以让用户很方便的在输入框上选择时间。
废话少说，现在进入正题
成都创新互联公司成立于2013年，先为赤壁等服务建站，赤壁等地企业，进行企业商务咨询服务。为赤壁企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
一、国际惯例，先上实例
1、代码
Date:
2、效果
jquery-ui-datepicker截图–ifxoxo.com
二、具体用法
1、需要加载文件
(1)jquery.js
(2)jquery.ui
(3)jquery.ui的css
rel="stylesheet"/>
2、页面上的HTML代码
需要一个用来加载datepicker控件的输入框
3、js代码
最简单的初始化函数：
$(.selecter).datepicker()
4、datepicker()的参数
datepicker非常强大，所以也提供了很多使用的参数，先看一个复杂一点的例子，然后再介绍参数。
效果如下(灰色部分表示不能选择)
jquery-ui-datepicker 一个复杂的例子–ifxoxo.com
因为参数较多，把所有参数根据功能分成几组进行阐述
(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)
$('.selector').datepicker({
beforeShow:function(event, ui){ alert4'has create!!');}
});
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');
$(".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
分享标题：jqueryui（五）日期选择器datepicker
文章URL：http://dzwzjz.com/article/gcphii.html