JQuery datepicker 使用方法 |
|
官方地址：http://docs.jquery.com/UI/Datepicker，官方示例： http://jqueryui.com/demos/datepicker/ 。 一个不错的地址，用来DIY jQuery UI界面效果的站点http://jqueryui.com/themeroller/ DatePicker基本使用方法： 复制代码 代码如下: <!DOCTYPE html> <html> <head> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script> $(document).ready(function() { $("#datepicker").datepicker(); }); </script> </head> <body style="font-size:62.5%;"> <div type="text" id="datepicker"></div> </body> </html> DatePicker支持鼠标点选日期，同时还可以通过键盘控制选择： 复制代码 代码如下: page up/down - 上一月、下一月 ctrl+page up/down - 上一年、下一年 ctrl+home - 当前月或最后一次打开的日期 ctrl+left/right - 上一天、下一天 ctrl+up/down - 上一周、下一周 enter - 确定选择日期 ctrl+end - 关闭并清除已选择的日期 escape - 关闭并取消选择 实用功能： 复制代码 代码如下: $.datepicker.setDefaults( settings ) - 全局设置日期选择插件的参数. $.datepicker.formatDate( format, date, settings ) - 格式化显示的日期字符串 $.datepicker.iso8601Week( date ) - 给出一个日期，确实他是一年中的第几周 $.datepicker.parseDate( format, value, settings ) - 按照指定格式获取日期字符串 日期格式： 复制代码 代码如下: d - 每月的第几天 (没有前导零) dd - 每月的第几天 (两位数字) o - 一年中的第几天 (没有前导零) oo - 一年中的第几天 (三位数字) D - day name short DD - day name long m - 月份 (没有前导零) mm - 月份 (两位数字) M - month name short MM - month name long y - 年份 (两位数字) yy - 年份 (四位数字) @ - Unix 时间戳 (从 01/01/1970 开始) ... - 文本 - 单引号 （其它） - 文本 其它标准日期格式: 复制代码 代码如下: ATOM - yy-mm-dd (Same as RFC 3339/ISO 8601) COOKIE - D, dd M yy ISO_8601 - yy-mm-dd RFC_822 - D, d M y RFC_850 - DD, dd-M-y RFC_1036 - D, d M y RFC_1123 - D, d M yy RFC_2822 - D, d M yy RSS - D, d M y TIMESTAMP - @ W3C - yy-mm-dd 参数（参数名 : 参数类型 : 默认值） 复制代码 代码如下: altField : String : 将选择的日期同步到另一个域中，配合altFormat可以显示不同格式的日期字符串 。 初始：$(.selector).datepicker({ altField: #actualDate }); 获取：var altField = $(.selector).datepicker(option, altField); 设置：$(.selector).datepicker(option, altField, #actualDate); altFormat : String : 当设置了altField的情况下，显示在另一个域中的日期格式 。 初始：$(.selector).datepicker({ altFormat: yy-mm-dd }); 获取：var altFormat = $(.selector).datepicker(option, altFormat); 设置：$(.selector).datepicker(option, altFormat, yy-mm-dd); appendText : String : 在日期插件的所属域后面添加指定的字符串 。 初始：$(.selector).datepicker({ appendText: (yyyy-mm-dd) }); 获取：var appendText = $(.selector).datepicker(option, appendText); 设置：$(.selector).datepicker(option, appendText, (yyyy-mm-dd)); buttonImage : String : 设置弹出按钮的图片，如果非空，则按钮的文本将成为alt属性，不直接显示 。 初始：$(.selector).datepicker({ buttonImage: /images/datepicker.gif }); 获取：var buttonImage = $(.selector).datepicker(option, buttonImage); 设置：$(.selector).datepicker(option, buttonImage, /images/datepicker.gif); buttonImageOnly : Boolean : false Set to true to place an image after the field to use as the trigger without it appearing on a button. 初始：$(.selector).datepicker({ buttonImageOnly: true }); 获取：var buttonImageOnly = $(.selector).datepicker(option, buttonImageOnly); 设置：$(.selector).datepicker(option, buttonImageOnly, true); buttonText : String : ... 设置触发按钮的文本内容 。 初始：$(.selector).datepicker({ buttonText: Choose }); 获取：var buttonText = $(.selector).datepicker(option, buttonText); 设置：$(.selector).datepicker(option, buttonText, Choose); changeMonth : Boolean : false 设置允许通过下拉框列表选取月份 。 初始：$(.selector).datepicker({ changeMonth: true }); 获取：var changeMonth = $(.selector).datepicker(option, changeMonth); 设置：$(.selector).datepicker(option, changeMonth, true); changeYear : Boolean : false 设置允许通过下拉框列表选取年份 。 初始：$(.selector).datepicker({ changeYear: true }); 获取：var changeYear = $(.selector).datepicker(option, changeYear); 设置：$(.selector).datepicker(option, changeYear, true); closeTextType: StringDefault: Done 设置关闭按钮的文本内容，此按钮需要通过showButtonPanel参数的设置才显示 。 初始：$(.selector).datepicker({ closeText: X }); 获取：var closeText = $(.selector).datepicker(option, closeText); 设置：$(.selector).datepicker(option, closeText, X); constrainInput : Boolean : true 如果设置为true，则约束当前输入的日期格式 。 初始：$(.selector).datepicker({ constrainInput: false }); 获取：var constrainInput = $(.selector).datepicker(option, constrainInput); 设置：$(.selector).datepicker(option, constrainInput, false); currentText : String : Today 设置当天按钮的文本内容，此按钮需要通过showButtonPanel参数的设置才显示 。 初始：$(.selector).datepicker({ currentText: Now }); 获取：var currentText = $(.selector).datepicker(option, currentText); 设置：$(.selector).datepicker(option, currentText, Now); dateFormat : String : mm/dd/yy 设置日期字符串的显示格式 。 初始：$(.selector).datepicker({ dateFormat: yy-mm-dd }); 获取：var dateFormat = $(.selector).datepicker(option, dateFormat); 设置：$(.selector).datepicker(option, dateFormat, yy-mm-dd); dayNames : Array : [Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday] 设置一星期中每天的名称，从星期天开始 。此内容用于dateFormat时显示，以及日历中当鼠标移至行头时显示 。 初始：$(.selector).datepicker({ dayNames: [Dimanche, Lundi, Mardi, Mercredi, Jeudi, Vendredi, Samedi] }); 获取：var dayNames = $(.selector).datepicker(option, dayNames); 设置：$(.selector).datepicker(option, dayNames, [Dimanche, Lundi, Mardi, Mercredi, Jeudi, Vendredi, Samedi]); dayNamesMin : Array : [Su, Mo, Tu, We, Th, Fr, Sa] 设置一星期中每天的缩语，从星期天开始，此内容用于dateFormat时显示，以前日历中的行头显示 。 初始：$(.selector).datepicker({ dayNamesMin: [Di, Lu, Ma, Me, Je, Ve, Sa] }); 获取：var dayNamesMin = $(.selector).datepicker(option, dayNamesMin); 设置：$(.selector).datepicker(option, dayNamesMin, [Di, Lu, Ma, Me, Je, Ve, Sa]); dayNamesShort : Array : [Sun, Mon, Tue, Wed, Thu, Fri, Sat] 设置一星期中每天的缩语，从星期天开始，此内容用于dateFormat时显示，以前日历中的行头显示 。 初始：$(.selector).datepicker({ dayNamesShort: [Dim, Lun, Mar, Mer, Jeu, Ven, Sam] }); 获取：var dayNamesShort = $(.selector).datepicker(option, dayNamesShort); 设置：$(.selector).datepicker(option, dayNamesShort, [Dim, Lun, Mar, Mer, Jeu, Ven, Sam]); defaultDate : Date, Number, String : null 设置默认加载完后第一次显示时选中的日期 。可以是Date对象，或者是数字（从今天算起，例如+7），或者有效的字符串(y代表年, m代表月, w代表周, d代表日, 例如：+1m +7d) 。 初始：$(.selector).datepicker({ defaultDate: +7 }); 获取：var defaultDate = $(.selector).datepicker(option, defaultDate); 设置：$(.selector).datepicker(option, defaultDate, +7); duration : String, Number : normal 设置日期控件展开动画的显示时间，可选是"slow", "normal", "fast"，代表立刻，数字代表毫秒数 。 初始：$(.selector).datepicker({ duration: slow }); 获取：var duration = $(.selector).datepicker(option, duration); 设置：$(.selector).datepicker(option, duration, slow); firstDay : Number : 0 设置一周中的第一天 。星期天为0，星期一为1，以此类推 。 初始：$(.selector).datepicker({ firstDay: 1 }); 获取：var firstDay = $(.selector).datepicker(option, firstDay); 设置：$(.selector).datepicker(option, firstDay, 1); gotoCurrent : Boolean : false 如果设置为true，则点击当天按钮时，将移至当前已选中的日期，而不是今天 。 初始：$(.selector).datepicker({ gotoCurrent: true }); 获取：var gotoCurrent = $(.selector).datepicker(option, gotoCurrent); 设置：$(.selector).datepicker(option, gotoCurrent, true); hideIfNoPrevNext : Boolean : false 设置当没有上一个/下一个可选择的情况下，隐藏掉相应的按钮 。（默认为不可用） 初始：$(.selector).datepicker({ hideIfNoPrevNext: true }); 获取：var hideIfNoPrevNext = $(.selector).datepicker(option, hideIfNoPrevNext); 设置：$(.selector).datepicker(option, hideIfNoPrevNext, true); isRTL : Boolean : false 如果设置为true，则所有文字是从右自左 。 初始：$(.selector).datepicker({ isRTL: true }); 获取：var isRTL = $(.selector).datepicker(option, isRTL); 设置：$(.selector).datepicker(option, isRTL, true); maxDate : Date, Number, String : null 设置一个最大的可选日期 。可以是Date对象，或者是数字（从今天算起，例如+7），或者有效的字符串(y代表年, m代表月, w代表周, d代表日, 例如：+1m +7d) 。 初始：$(.selector).datepicker({ maxDate: +1m +1w }); 获取：var maxDate = $(.selector).datepicker(option, maxDate); 设置：$(.selector).datepicker(option, maxDate, +1m +1w); $(.selector).datepicker(option, maxDate, 12/25/2012); minDate : Date, Number, String : null 设置一个最小的可选日期 。可以是Date对象，或者是数字（从今天算起，例如+7），或者有效的字符串(y代表年, m代表月, w代表周, d代表日, 例如：+1m +7d) 。 初始：$(.selector).datepicker({ minDate: new Date(2007, 1 - 1, 1) }); 获取：var minDate = $(.selector).datepicker(option, minDate); 设置：$(.selector).datepicker(option, minDate, new Date(2007, 1 - 1, 1)); $(.selector).datepicker(option, minDate, 12/25/2012); monthNames : Array : [January, February, March, April, May, June, July, August, September, October, November, December] 设置所有月份的名称 。 初始：$(.selector).datepicker(｛monthNames:[Januar,Februar,Marts,April,Maj,Juni,Juli,August,September,Oktober,November,December]}); 获取：var monthNames = $(.selector).datepicker(option, monthNames); 设置：$(.selector).datepicker(option, monthNames, [Januar,Februar,Marts,April,Maj,Juni,Juli,August,September,Oktober,November,December]); monthNamesShort : Array : [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec] 设置所有月份的缩写 。 初始：$(.selector).datepicker(｛monthNamesShort:[Jan,Feb,Mar,Apr,Maj,Jun,Jul,Aug,Sep,Okt,Nov,Dec]}); 获取：var monthNamesShort = $(.selector).datepicker(option, monthNamesShort); 设置：$(.selector).datepicker(option, monthNamesShort, [Jan,Feb,Mar,Apr,Maj,Jun,Jul,Aug,Sep,Okt,Nov,Dec]); navigationAsDateFormat : Boolean : false 如果设置为true，则formatDate函数将应用到 prevText,nextText和currentText的值中显示，例如显示为月份名称 。 初始：$(.selector).datepicker({ navigationAsDateFormat: true }); 获取：var navigationAsDateFormat = $(.selector).datepicker(option, navigationAsDateFormat); 设置：$(.selector).datepicker(option, navigationAsDateFormat, true); nextText : String : Next 设置“下个月”链接的显示文字 。 初始：$(.selector).datepicker({ nextText: Later }); 获取：var nextText = $(.selector).datepicker(option, nextText); 设置：$(.selector).datepicker(option, nextText, Later); numberOfMonths : Number, Array : 1 设置一次要显示多少个月份 。如果为整数则是显示月份的数量，如果是数组，则是显示的行与列的数量 。 初始：$(.selector).datepicker({ numberOfMonths: [2, 3] }); 获取：var numberOfMonths = $(.selector).datepicker(option, numberOfMonths); 设置：$(.selector).datepicker(option, numberOfMonths, [2, 3]); prevText : String : Prev 设置“上个月”链接的显示文字 。 初始：$(.selector).datepicker({ prevText: Earlier }); 获取：var prevText = $(.selector).datepicker(option, prevText); 设置：$(.selector).datepicker(option, prevText, Earlier); shortYearCutoff : String, Number : +10 设置截止年份的值 。如果是（0-99）的数字则以当前年份开始算起，如果为字符串，则相应的转为数字后再与当前年份相加 。当超过截止年份时，则被认为是上个世纪 。 初始：$(.selector).datepicker({ shortYearCutoff: 50 }); 获取：var shortYearCutoff = $(.selector).datepicker(option, shortYearCutoff); 设置：$(.selector).datepicker(option, shortYearCutoff, 50); showAnim : String : show 设置显示、隐藏日期插件的动画的名称 。 初始：$(.selector).datepicker({ showAnim: fold }); 获取：var showAnim = $(.selector).datepicker(option, showAnim); 设置：$(.selector).datepicker(option, showAnim, fold); showButtonPanel : Boolean : false 设置是否在面板上显示相关的按钮 。 初始：$(.selector).datepicker({ showButtonPanel: true }); 获取：var showButtonPanel = $(.selector).datepicker(option, showButtonPanel); 设置：$(.selector).datepicker(option, showButtonPanel, true); showCurrentAtPos : Number : 0 设置当多月份显示的情况下，当前月份显示的位置 。自顶部/左边开始第x位 。 初始：$(.selector).datepicker({ showCurrentAtPos: 3 }); 获取：var showCurrentAtPos = $(.selector).datepicker(option, showCurrentAtPos); 设置：$(.selector).datepicker(option, showCurrentAtPos, 3); showMonthAfterYear : Boolean : false 是否在面板的头部年份后面显示月份 。 初始：$(.selector).datepicker({ showMonthAfterYear: true }); 获取：var showMonthAfterYear = $(.selector).datepicker(option, showMonthAfterYear); 设置：$(.selector).datepicker(option, showMonthAfterYear, true); showOn : String : focus 设置什么事件触发显示日期插件的面板，可选值：focus, button, both 初始：$(.selector).datepicker({ showOn: both }); 获取：var showOn = $(.selector).datepicker(option, showOn); 设置：$(.selector).datepicker(option, showOn, both); showOptions : Options : {} 如果使用showAnim来显示动画效果的话，可以通过此参数来增加一些附加的参数设置 。 初始：$(.selector).datepicker({ showOptions: {direction: up }); 获取：var showOptions = $(.selector).datepicker(option, showOptions); 设置：$(.selector).datepicker(option, showOptions, {direction: up); showOtherMonths : Boolean : false 是否在当前面板显示上、下两个月的一些日期数（不可选） 。 初始：$(.selector).datepicker({ showOtherMonths: true }); 获取：var showOtherMonths = $(.selector).datepicker(option, showOtherMonths); 设置：$(.selector).datepicker(option, showOtherMonths, true); stepMonths : Number : 1 当点击上/下一月时，一次翻几个月 。 初始：$(.selector).datepicker({ stepMonths: 3 }); 获取：var stepMonths = $(.selector).datepicker(option, stepMonths); 设置：$(.selector).datepicker(option, stepMonths, 3); yearRange : String : -10:+10 控制年份的下拉列表中显示的年份数量，可以是相对当前年(-nn:+nn)，也可以是绝对值 (-nnnn:+nnnn) 初始：$(.selector).datepicker({ yearRange: 2000:2010 }); 获取：var yearRange = $(.selector).datepicker(option, yearRange); 设置：$(.selector).datepicker(option, yearRange, 2000:2010); 事件 复制代码 代码如下: beforeShow : function(input) 在日期控件显示面板之前，触发此事件，并返回当前触发事件的控件的实例对象 。 初始：$(.selector).datepicker({ beforeShow: function(input) { ... } }); beforeShowDay : function(date) 在日期控件显示面板之前，每个面板上的日期绑定时都触发此事件，参数为触发事件的日期 。调用函数后，必须返回一个数组：[0]此日期是否可选(true/false)，[1]此日期的CSS样式名称(""表示默认)，[2]当鼠标移至上面出现一段提示的内容 。 初始：$(.selector).datepicker({ beforeShowDay: function(date) { ... } }); onChangeMonthYear : function(year, month, inst) 当年份或月份改变时触发此事件，参数为改变后的年份月份和当前日期插件的实例 。 初始：$(.selector).datepicker({ onChangeMonthYear: function(year, month, inst) { ... } }); onClose : function(dateText, inst) 当日期面板关闭后触发此事件（无论是否有选择日期），参数为选择的日期和当前日期插件的实例 。 初始：$(.selector).datepicker({ onClose: function(dateText, inst) { ... } }); onSelect : function(dateText, inst) 当在日期面板选中一个日期后触发此事件，参数为选择的日期和当前日期插件的实例 。 $(.selector).datepicker({ onSelect: function(dateText, inst) { ... } }); 方法： 复制代码 代码如下: destory 从元素中移除拖拽功能 。 用法：.datepicker( destroy ) disable 禁用元素的拖拽功能 。 用法：.datepicker( disable ) enable 启用元素的拖拽功能 。 用法：.datepicker( enable ) option 获取或设置元素的参数 。 用法：.datepicker( option , optionName , [value] ) dialog 在dialog插件中打开一个日期插件 。 用法：.datepicker( dialog , dateText , [onSelect] , [settings] , [pos] ) isDisabled 确实日期插件是否已被禁用 。 用法：.datepicker( isDisabled ) hide 隐藏（关闭）之前已经打开的日期面板 。 用法：.datepicker( hide , [speed] ) show .datepicker( show ) 显示日期插件 。 用法：.datepicker( show ) getDate 返回当前日期插件选择的日期 。 用法：.datepicker( getDate ) setDate 设置日期插件当前的日期 。date参数可以是数字（从今天算起，例如+7），或者有效的字符串(y代表年, m代表月, w代表周, d代表日, 例如：+1m +7d)，null表示当天 。 用法：.datepicker( setDate , date ) jquery-ui-datepicker的用法讲解 1:先在页面引入相关的js,注意引入顺序不能错 jquery-1.4.2.min.js jquery-ui.min.js jquery.ui.datepicker.min.js jquery.ui.datepicker-zh-CN.min.js jquery.ui.datepicker-fr.min.js ....等等语言包(用到哪些加入哪些) 注意:在语言包的最后一句话设置了该datepicker的缺省Localization 类似这句：setDefaults(....regional[...]) 所以页面的datepicker如果不再自己设置的话，缺省会以最后一个引入的语言包的Localization为准. 2:页面示例 其中的注释已经很清楚了,datepicker的官方文档对于option的设置是先init datepicker,再setter or getter 复制代码 代码如下: <html> <head> <script type="text/javascript"> $(function() { //$("#datepicker").datepicker(...);//代表带着...属性直接执行创建datepicker() //必须先init datepicker才能再设置datepicker的option //$("#datepicker").datepicker(option,...,...);//代表设置datepicker的...的属性值为...,但不执行创建datepicker(); //$.datepicker.setDefaults($.datepicker.regional[zh-CN]); $.datepicker.setDefaults($.datepicker.regional[]);//先清理一下语言包的regional $("#datepicker").datepicker(); $("#datepicker").datepicker(option, $.datepicker.regional[zh-CN]); //$("#datepicker").datepicker($.datepicker.regional[zh-CN]);//该句执行失效，因为之前有$("#datepicker").datepicker();了 $("#datepicker").datepicker(option, dateFormat,yy-mm-dd);//set dateFormat //var dateFormat = $( "#datepicker" ).datepicker( "option", "dateFormat" );//get dateFormat //$("#datepicker").datepicker(option, {dateFormat: yy-mm-dd});//set dateFormat }); </script> </head> <body> <!--div id="datepicker"></div--> <input id="datepicker" type="text"/> </body> </html> |
