jqueryui(五)日期选择器datepicker.docx

原文地址：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控件的输入框三、js代码初始化函数：$(.selecter).datepicker()【参数】因为参数较多，把所有参数根据功能分成几组进行阐述1、动画durationnormal设置日期控件展开动画的显示时间，可选是slow, normal, fast，代表立刻，数字代表毫秒数。showAnimshow设置显示、隐藏日期插件的动画的名称。showOptions如果使用showAnim来显示动画效果的话，可以通过此参数来增加一些附加的参数设置。2、图片按钮buttonImage 设置弹出按钮的图片，如果非空，则按钮的文本将成为alt属性，不直接显示。buttonImageOnlyfalse是否把按钮安全显示成图片的样子buttonText.设置触发按钮的文本内容。showOnfocus设置什么事件触发显示日期插件的面板，可选值：focus, button, both(当为focus时，不显示图片按钮)3、选中之后时间格式dateFormatmm/dd/yy设置日期字符串的显示格式。 dayNamesSunday, Monday,Tuesday, Wednesday,Thursday, Friday,Saturday设置一星期中每天的名称，从星期天开始。此内容用于dateFormat时显示，以及日历中当鼠标移至行头时显示。dayNamesMinSu, Mo, Tu,We, Th, Fr, Sa设置一星期中每天的缩语，从星期天开始，此内容用于dateFormat时显示，以前日历中的行头显示dayNamesShortSun, Mon, Tue,Wed, Thu, Fri, Sat设置一星期中每天的缩语，从星期天开始，navigationAsDateFormatfalse如果设置为true，则formatDate函数将应用到 prevText,nextText和currentText的值中显示，例如显示为月份名称。constrainInputtrue如果设置为true，则约束当前输入的日期格式。4、面板底部的按钮控制showButtonPanelfalse设置是否在面板上显示相关的按钮closeTextTypedone设置关闭按钮的文本内容currentTexttoday设置当天按钮的文本内容gotoCurrentfalse如果设置为true，则点击当天按钮时，将移至当前已选中的日期，而不是今天5、可选中的时间范围maxDatefalse设置一个最大的可选日期。可以是Date对象，或者是数字（从今天算起，例如+7），或者有效的字符串(y代表年, m代表月,w代表周, d代表日, 例如：+1m +7d)。minDatefalse设置一个最小的可选日期。可以是Date对象，或者是数字（从今天算起，例如+7），或者有效的字符串(y代表年, m代表月,w代表周, d代表日, 例如：+1m +7d)。yearRange-10:+10控制年份的下拉列表中显示的年份数量，可以是(-nn:+nn)，也可以是绝对值 (-nnnn:+nnnn)shortYearCutoff+10设置截止年份的值。如果是（0-99）的数字则以当前年份开始算起，当超过截止年份时，则被认为是上个世纪6、面板中上一月下一月按钮控制hideIfNoPrevNextfalse设置当没有上一个/下一个可选择的情况下，隐藏掉相应的按钮。（默认为不可用）nextTextNext设置“下个月”链接的显示文字prevTextPrev设置“上个月”链接的显示文字。stepMonths1当点击上/下一月时，一次翻几个月。7、面板其他显示参数firstDay0设置一周中的第一天。星期天为0，星期一为1，以此类推。defaultDatenull设置默认加载完后第一次显示时选中的日期。可以是Date对象，或者是数字（从今天算起，例如+7），或者有效的字符串(y代表年, m代表月, w代表周, d代表日, 例如：+1m +7d)。changeMonthfalse设置允许通过下拉框列表选取月份。changeYearfalse设置允许通过下拉框列表选取年份。monthNamesJanuary, February,March, April, May,June, July, August,September, October,November, December设置所有月份的名称monthNamesShortJan, Feb, Mar,Apr, May, Jun,Jul, Aug, Sep,Oct, Nov, Dec设置所有月份的缩写。(具体展现在下拉列表changeMonth)numberOfMonths 1设置一次要显示多少个月份。如果为整数则是显示月份的数量，如果是数组2, 3，则是显示的行与列的数量。showCurrentAtPos0设置当多月份显示的情况下，当前月份显示的位置。自顶部/左边开始第x位。showMonthAfterYearfalse是否在面板的头部年份后面显示月份。showOtherMonthsfalse是否在当前面板显示上、下两个月的一些日期数（不可选）。isRTLfalse如果设置为true，则所有文字是从右自左。appendTextnull在日期插件的所属域后面添加指定的字符串8、同步显示到其他inputaltFieldnull将选择的日期同步到另一个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 返回这个el