《jqueryui日期选择器datepicker》由会员分享，可在线阅读，更多相关《jqueryui日期选择器datepicker（9页珍藏版）》请在金锄头文库上搜索。
1、原文地址： jquery ui（五）日期选择器 datepicker 作者：kerwinJQuery官方的 Datepicker控件，可以很方便的使用，可以让用户很方便的在输入框上选择时间。废话少说，先上实例【代码】$(function() $( #datepicker ).datepicker(););Date: 【效果图】下面介绍一下具体用法：一、需要加载的 js文件(1)jquery.js(2)jquery.ui.core.js(3)jquery.ui.widget.js(4)jquery.ui.datepicker.js二、html 代码需要一个用来加载 datepicker控件的输入
2、框三、js 代码初始化函数：$(.selecter).datepicker()【参数】因为参数较多，把所有参数根据功能分成几组进行阐述1、动画duration normal设置日期控件展开动画的显示时间，可选是slow, normal, fast，代表立刻，数字代表毫秒数。showAnim show 设置显示、隐藏日期插件的动画的名称。showOptions 如果使用 showAnim 来显示动画效果的话，可以通过此参数来增加一些附加的参数设置。2、图片按钮buttonImage 设置弹出按钮的图片，如果非空，则按钮的文本将成为 alt 属性，不直接显示。buttonImageOnly fal
3、se 是否把按钮安全显示成图片的样子buttonText . 设置触发按钮的文本内容。showOn focus设置什么事件触发显示日期插件的面板，可选值：focus, button, both(当为 focus 时，不显示图片按钮)3、选中之后时间格式dateFormat mm/dd/yy 设置日期字符串的显示格式。 dayNamesSunday, Monday,Tuesday, Wednesday,设置一星期中每天的名称，从星期天开始。此内容用于 dateFormat时显示，以及日历中当鼠标移至行头时显示。Thursday, Friday,SaturdaydayNamesMinSu, Mo,
4、 Tu,We, Th, Fr, Sa设置一星期中每天的缩语，从星期天开始，此内容用于 dateFormat时显示，以前日历中的行头显示dayNamesShortSun, Mon, Tue,Wed, Thu, Fri, Sat设置一星期中每天的缩语，从星期天开始，navigationAsDateFormat false如果设置为 true，则 formatDate函数将应用到 prevText,nextText和 currentText 的值中显示，例如显示为月份名称。constrainInput true 如果设置为 true，则约束当前输入的日期格式。4、面板底部的按钮控制showButto
5、nPanel false 设置是否在面板上显示相关的按钮closeTextType done 设置关闭按钮的文本内容currentText today 设置当天按钮的文本内容gotoCurrent false如果设置为 true，则点击当天按钮时，将移至当前已选中的日期，而不是今天5、可选中的时间范围maxDate false设置一个最大的可选日期。可以是 Date 对象，或者是数字（从今天算起，例如+7），或者有效的字符串(y代表年, m 代表月,w代表周 , d代表日, 例如：+1m +7d)。minDate false 设置一个最小的可选日期。可以是 Date 对象，或者是数字（从今天算
6、起，例如+7），或者有效的字符串(y代表年, m 代表月,w代表周 , d代表日, 例如：+1m +7d)。yearRange -10:+10控制年份的下拉列表中显示的年份数量，可以是(-nn:+nn)，也可以是绝对值 (-nnnn:+nnnn)shortYearCutoff +10设置截止年份的值。如果是（0-99）的数字则以当前年份开始算起，当超过截止年份时，则被认为是上个世纪6、面板中上一月下一月按钮控制hideIfNoPrevNext false设置当没有上一个/下一个可选择的情况下，隐藏掉相应的按钮。（默认为不可用）nextText Next 设置“下个月 ”链接的显示文字prevT
7、ext Prev 设置“上个月 ”链接的显示文字。stepMonths 1 当点击上/下一月时，一次翻几个月。7、面板其他显示参数firstDay 0 设置一周中的第一天。星期天为 0，星期一为1，以此类推。defaultDate null设置默认加载完后第一次显示时选中的日期。可以是 Date 对象，或者是数字（从今天算起，例如+7），或者有效的字符串(y代表年, m 代表月, w代表周, d 代表日, 例如：+1m +7d) 。changeMonth false 设置允许通过下拉框列表选取月份。changeYear false 设置允许通过下拉框列表选取年份。monthNamesJanua
8、ry, February,March, April, 设置所有月份的名称May,June, July, August,September, October,November, DecembermonthNamesShortJan, Feb, Mar,Apr, May, Jun,Jul, Aug, Sep,Oct, Nov, Dec设置所有月份的缩写。(具体展现在下拉列表 changeMonth)numberOfMonths 1设置一次要显示多少个月份。如果为整数则是显示月份的数量，如果是数组2, 3 ，则是显示的行与列的数量。showCurrentAtPos 0 设置当多月份显示的情况下，当前
9、月份显示的位置。自顶部/左边开始第 x 位。showMonthAfterYear false 是否在面板的头部年份后面显示月份。showOtherMonths false 是否在当前面板显示上、下两个月的一些日期数（不可选）。isRTL false 如果设置为 true，则所有文字是从右自左。appendText null 在日期插件的所属域后面添加指定的字符串8、同步显示到其他 inputaltField null将选择的日期同步到另一个 input 中，配合 altFormat 可以显示不同格式的日期字符串。altFormat 当设置了 altField 的情况下，显示在另一个 input
10、 中的日期格式。【代码示例】【效果】四、其他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(
11、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);
