这篇文章主要介绍了JQuery日期选择器用法详解的相关资料,需要的朋友可以参考下
jQuery UI很强大,其中的日期选择插件日期选择器是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。
官方地址:http://docs.jquery.com/UI/Datepicker,官方示例:http://jquery ui . com/demos/date picker/.
一个不错的地址,用来DIY jQuery用户界面界面效果的站点http://jqueryui.com/themeroller/
DatePicker基本使用方法:
!文档类型超文本标记语言
超文本标记语言
头
链接href=' http://Ajax。谷歌API。com/Ajax/libs/jquery ui/1.8/themes/base/jquery-ui。CSS ' rel='样式表' type=' text/CSS '/
脚本src=' http://Ajax。谷歌API。com/Ajax/libs/jquery/1.4/jquery。量滴js '/脚本
脚本src=' http://Ajax。谷歌API。com/Ajax/libs/jquery ui/1.8/jquery-ui。量滴js '/脚本
脚本
$(文档)。ready(function() {
$('#datepicker ').日期选取器();
});
/脚本
/头
body style=' font-size:62.5%;'
div type=' text ' id='日期选取器'/div
/body
/html
向上/向下翻页-上一月、下一月
计算机的ctrl按键向上/向下翻页-上一年、下一年
计算机的ctrl按键主页-当前月或最后一次打开的日期
计算机的ctrl按键左/右-上一天、下一天
计算机的ctrl按键向上/向下-上一周、下一周
输入-确定选择日期
计算机的ctrl按键结束-关闭并清除已选择的日期
逃跑-关闭并取消选择
$.datepicker.setDefaults(设置)-全局设置日期选择插件的参数。
$.datepicker.formatDate(格式,日期,设置)-格式化显示的日期字符串
$ .日期选择器。iso 8601周(日期)给出一个日期,确实他是一年中的第几周
$.datepicker.parseDate(格式,值,设置)-按照指定格式获取日期字符串
d -每月的第几天(没有前导零)
dd -每月的第几天(两位数字)
哦-一年中的第几天(没有前导零)
表示"卵"一年中的第几天(三位数字)
登陆日简称
日长名称
间位月份(没有前导零)
嗯-月份(两位数字)
间位月份名称缩写
嗯-月份名称长
你-年份(两位数字)
yy -年份(四位数字)
@ - Unix时间戳(从01/01/1970 开始)
'.'-文本
'' - 单引号
(其它) - 文本
原子-'年-月-日'(与RFC 3339/ISO 8601相同)
饼干-'年月日'
ISO_8601 -'年月日'
RFC_822 - 'D,D,M y '
RFC_850 -'年月日'
RFC_1036 - 'D,D,M y
RFC_1123 -'年月日'
RFC_2822 -'年月日'
RSS - 'D,D,M y '
时间戳-"@"
W3C——”年-月-日"
奥尔特菲尔德:字符串:""
将选择的日期同步到另一个域中,配合替代格式可以显示不同格式的日期字符串。
初始:$('.选择器)。日期选取器({ alt字段:' #实际日期' });
获取:var altField=$(' .选择器)。datepicker('option ',' alt field ');
设置:$('.选择器)。datepicker('option ',' altField ',' # actual date ');
替代格式:字符串:""
当设置了奥尔特菲尔德的情况下,显示在另一个域中的日期格式。
初始:$('.选择器)。日期选取器({ alt格式:' YY-月-日' });
获取:var altFormat=$(' .选择器)。datepicker('option ',' alt format ');
设置:$('.选择器)。datepicker('option ',' altFormat ',' YY-mm-DD ');
附录文本:字符串:""
在日期插件的所属域后面添加指定的字符串。
初始:$('.选择器)。日期选取器({ appendText:'(yyyy-mm-DD)' });
获取:var appendText=$(' .选择器)。datepicker('option ',' appendText ');
设置:$('.选择器)。datepicker('option ',' appendText ','(yyyy-mm-DD)');
按钮图像:字符串:""
设置弹出按钮的图片,如果非空,则按钮的文本将成为中高音属性,不直接显示。
初始:$('.选择器)。日期选取器({按钮图像:'/图像/日期选取器。gif ' });
获取:var buttonImage=$(' .选择器)。datepicker('option ','按钮图像');
设置:$('.选择器)。日期选择器(' option ',' buttonImage ','/images/日期选择器。gif’);
buttonImageOnly : Boolean : false
设定为真实的以将图像放置在字段之后用作触发器,而图像不会出现在按钮上。
初始:$('.选择器)。日期选取器({ buttonImageOnly:true });
获取:var buttonImageOnly=$(' .选择器)。datepicker('option ','仅按钮图像');
设置:$('.选择器)。datepicker('option ',' buttonImageOnly ',true);
buttonText : String:" . "
设置触发按钮的文本内容。
初始:$('.选择器)。日期选取器({ button text:' Choose ' });
获取:var buttonText=$(' .选择器)。datepicker('option ','按钮文本');
设置:$('.选择器)。datepicker('option ',' buttonText ',' Choose ');
变更月份:布尔值:错误
设置允许通过下拉框列表选取月份。
初始:$('.选择器)。日期选择器({ change month:true });
获取:var changeMonth=$(' .选择器)。datepicker('option ',' change month ');
设置:$('.选择器)。datepicker('option ',' changeMonth ',true);
变更年份:布尔值:错误
设置允许通过下拉框列表选取年份。
初始:$('.选择器)。日期选取器({更改年份:true });
获取:var changeYear=$(' .选择器)。datepicker('option ','更改年份');
设置:$('.选择器)。datepicker('option ',' changeYear ',true);
关闭文本类型:字符串默认值:“完成”
设置关闭按钮的文本内容,此按钮需要通过显示按钮面板参数的设置才显示。
初始:$('.选择器)。日期选取器({ closeText:' X ' });
获取:var closeText=$(' .选择器)。datepicker('option ',' closeText ');
设置:$('.选择器)。datepicker('option ',' closeText ',' X ');
约束输入:布尔值:正确
如果设置为没错,则约束当前输入的日期格式。
初始:$('.选择器)。日期选择器({ constraint input:false });
获取:var constrainInput=$(' .选择器)。datepicker('option ',' constraint input ');
设置:$('.选择器)。datepicker('option ',' constrainInput ',false);
当前文本:字符串:"今天"
设置当天按钮的文本内容,此按钮需要通过显示按钮面板参数的设置才显示。
初始:$('.选择器)。日期选择器({ current text:' Now ' });
获取:var currentText=$(' .选择器)。datepicker('option ',' current text ');
设置:$('.选择器)。datepicker('option ',' currentText ',' Now ');
日期格式:字符串:"年/月/日"
设置日期字符串的显示格式。
初始:$('.选择器)。日期选取器({日期格式:' YY-年月日' });
获取:var dateFormat=$(' .选择器)。datepicker('option ','日期格式');
设置:$('.选择器)。datepicker('option ',' dateFormat ',' YY-mm-DD ');
日名:数组:['星期日','星期一','星期二','星期三','星期四','星期五','星期六]
设置一星期中每天的名称,从星期天开始。此内容用于日期格式时显示,以及日历中当鼠标移至行头时显示。
初始:$('.选择器)。日期选取器({日期名称:[' Dimanche ',' Lundi ',' Mardi ',' Mercredi ',' Jeudi ',' Vendredi ',' Samedi ']});
获取:var dayNames=$(' .选择器)。datepicker('option ','日名');
设置:$('.选择器)。datepicker('option ',' dayNames ',['Dimanche ',' Lundi ',' Mardi ',' Mercredi ',' Jeudi ',' Vendredi ',' Samedi ']);
dayNamesMin : Array : ['Su ',' Mo ',' Tu ',' We ',' Th ',' Fr ',' Sa']
设置一星期中每天的缩语,从星期天开始,此内容用于日期格式时显示,以前日历中的行头显示。
初始:$('.选择器)。datepicker({ dayNamesMin: ['Di ',' Lu ',' Ma ',' Me ',' Je ',' Ve ',' Sa ']});
获取:var dayNamesMin=$(' .选择器)。datepicker('option ',' day name smin ');
设置:$('.选择器)。datepicker('option ',' dayNamesMin ',['Di ',' Lu ',' Ma ',' Me ',' Je ',' Ve ',' Sa ']);
dayNamesShort : Array : ['Sun ',' Mon ',' Tue ',' Wed ',' Thu ',' Fri ',' Sat']
设置一星期中每天的缩语,从星期天开始,此内容用于日期格式时显示,以前日历中的行头显示。
初始:$('.选择器)。日期选取器({ dayNamesShort:[' Dim ',' Lun ',' Mar ',' Mer ',' Jeu ',' Ven ',' Sam ']});
获取:var dayNamesShort=$(' .选择器)。datepicker('option ',' day name short ');
设置:$('.选择器)。datepicker('option ',' dayNamesShort ',['Dim ',' Lun ',' Mar ',' Mer ',' Jeu ',' Ven ',' Sam ']);
默认日期:日期,数字,字符串:空
设置默认加载完后第一次显示时选中的日期。可以是日期对象,或者是数字(从今天算起,例如7),或者有效的字符串(' y '代表年,' m '代表月,' w '代表周,' d '代表日,例如:' 1m 7d ')。
初始:$('.选择器)。日期选取器({默认日期:7 });
获取:var defaultDate=$(' .选择器)。datepicker('option ','默认日期');
设置:$('.选择器)。datepicker('option ',' defaultDate ',7);
持续时间:字符串,数字:"正常"
设置日期控件展开动画的显示时间,可选是慢速','正常','快速',''代表立刻,数字代表毫秒数。
初始:$('.选择器)。日期选择器({ duration:' slow ' });
获取:var duration=$(' .选择器)。datepicker('option ',' duration ');
设置:$('.选择器)。日期选择器('选项','持续时间','慢速');
第一天:数字:0
设置一周中的第一天。星期天为0,星期一为1,以此类推。
初始:$('.选择器)。日期选取器({第一天:1 });
获取:var firstDay=$(' .选择器)。datepicker('option ','第一天');
设置:$('.选择器)。datepicker('option ',' firstDay ',1);
gotoCurrent:布尔值:错误
如果设置为没错,则点击当天按钮时,将移至当前已选中的日期,而不是今天。
初始:$('.选择器)。日期选取器({ goto current:true });
获取:var gotoCurrent=$(' .选择器)。datepicker('option ',' goto current ');
设置:$('.选择器)。datepicker('option ',' gotoCurrent ',true);
hideIfNoPrevNext : Boolean : false
设置当没有上一个/下一个可选择的情况下,隐藏掉相应的按钮。(默认为不可用)
初始:$('.选择器)。日期选取器({ hideIfNoPrevNext:true });
获取:var hideIfNoPrevNext=$(' .选择器)。datepicker('option ',' hideIfNoPrevNext ');
设置:$('.选择器)。datepicker('option ',' hideIfNoPrevNext ',true);
isRTL : Boolean : false
如果设置为没错,则所有文字是从右自左。
初始:$('.选择器)。日期选取器({ is RTL:true });
获取:var isRTL=$(' .选择器)。datepicker('option ',' isRTL ');
设置:$('.选择器)。datepicker('option ',' isRTL ',true);
最大日期:日期,数字,字符串:空
设置一个最大的可选日期。可以是日期对象,或者是数字(从今天算起,例如7),或者有效的字符串(' y '代表年,' m '代表月,' w '代表周,' d '代表日,例如:' 1m 7d ')。
初始:$('.选择器)。日期选取器({ maxDate:' 1m 1w ' });
获取:var maxDate=$(' .选择器)。datepicker('option ',' maxDate ');
设置:$('.选择器)。datepicker('option ',' maxDate ',' 1m 1w ');
$('.选择器)。datepicker('option ',' maxDate ',' 12/25/2012 ');
minDate:日期,数字,字符串:空
设置一个最小的可选日期。可以是日期对象,或者是数字(从今天算起,例如7),或者有效的字符串(' y '代表年,' m '代表月,' w '代表周,' d '代表日,例如:' 1m 7d ')。
初始:$('.选择器)。日期选择器({ minDate:new Date(2007,1 - 1,1)});
获取:var minDate=$(' .选择器)。datepicker('option ',' minDate ');
设置:$('.选择器)。datepicker('option ',' minDate ',new Date(2007,1 - 1,1));
$('.选择器)。datepicker('option ',' minDate ',' 12/25/2012 ');
monthNames:数组:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月]
设置所有月份的名称。
初始:$('.选择器)。日期选取器({ monthNames:[' January ',' Februar ',' Marts ',' April ',' Maj ','由尼,'朱莉','八月','九月','啤酒节','十一月','十二月']});
获取:var monthNames=$(' .选择器)。datepicker('option ','月份名称');
设置:$('.选择器)。datepicker('option ',' monthNames ',['Januar ',' Februar ',' Marts ',' April ',' Maj ','由尼,'朱莉','奥古斯特','九月,'啤酒节','十一月','十二月');
monthnameshort:Array:[' Jan ',' Feb ',' Mar ',' Apr ',' May ',' Jun ',' Jul ',' Aug ',' Sep ',' Oct ',' Nov ',' Dec']
设置所有月份的缩写。
初始:$('.选择器)。日期选取器({ monthnameshort:[' Jan ',' Feb ',' Mar ',' Apr ',' Maj ',' Jun ',' Jul ',' Aug ',' Sep ',' Okt ',' Nov ',' Dec ']);
获取:var monthNamesShort=$(' .选择器)。datepicker('option ',' monthnameshort ');
设置:$('.选择器)。datepicker('option ',' monthNamesShort ',['Jan ',' Feb ',' Mar ',' Apr ',' Maj ',' Jun ',' Jul ',' Aug ',' Sep ',' Okt ',' Nov ',' Dec ');
navigationdate format:Boolean:false
如果设置为没错,则格式化日期函数将应用到前一文本,后一文本和当前文本的值中显示,例如显示为月份名称。
初始:$('.选择器)。日期选取器({ navigationsdateformat:true });
获取:var navigationAsDateFormat=$(' .选择器)。datepicker('option ',' navigationsdateformat ');
设置:$('.选择器)。datepicker('option ',' navigationAsDateFormat ',true);
nextText : String:"下一个"
设置"下个月"链接的显示文字。
初始:$('.选择器)。日期选取器({ next text:' la ter ' });
获取:var nextText=$(' .选择器)。datepicker('option ',' next text ');
设置:$('.选择器)。datepicker('option ',' nextText ',' la ter ');
月数:数字,数组:1
设置一次要显示多少个月份。如果为整数则是显示月份的数量,如果是数组,则是显示的行与列的数量。
初始:$('.选择器)。datepicker({ numberOfMonths: [2,3]});
获取:var numberOfMonths=$(' .选择器)。datepicker('option ','月数');
设置:$('.选择器)。datepicker('option ',' numberOfMonths ',[2,3]);
前一篇文章:字符串:"上一个"
设置"上个月"链接的显示文字。
初始:$('.选择器)。日期选取器({ prev text:' early ' });
获取:var prevText=$(' .选择器)。datepicker('option ',' prev text ');
设置:$('.选择器)。datepicker('option ',' prevText ',' Earlier ');
短期截止日期:字符串,数字:"10"
设置截止年份的值。如果是(0-99)的数字则以当前年份开始算起,如果为字符串,则相应的转为数字后再与当前年份相加。当超过截止年份时,则被认为是上个世纪。
初始:$('.选择器)。日期选取器({ short year cut off:50 });
获取:var shortYearCutoff=$(' .选择器)。datepicker('option ','短年截止');
设置:$('.选择器)。datepicker('option ',' shortYearCutoff ',50);
showAnim : String : 'show '
设置显示、隐藏日期插件的动画的名称。
初始:$('.选择器)。日期选取器({ showAnim:' fold ' });
获取:var showAnim=$(' .选择器)。datepicker('option ',' showAnim ');
设置:$('.选择器)。datepicker('option ',' showAnim ',' fold ');
showButtonPanel : Boolean : false
设置是否在面板上显示相关的按钮。
初始:$('.选择器)。日期选取器({ showButtonPanel:true });
获取:var showButtonPanel=$(' .选择器)。datepicker('option ',' showButtonPanel ');
设置:$('.选择器)。datepicker('option ',' showButtonPanel ',true);
showCurrentAtPos:编号:0
设置当多月份显示的情况下,当前月份显示的位置。自顶部/左边开始第x位。
初始:$('.选择器)。日期选取器({ showcurrentapos:3 });
获取:var showCurrentAtPos=$(' .选择器)。datepicker('option ',' showcurrentapos ');
设置:$('.选择器)。datepicker('option ',' showCurrentAtPos ',3);
showMonthAfterYear:布尔值:错误
是否在面板的头部年份后面显示月份。
初始:$('.选择器)。日期选取器({ showMonthAfterYear:true });
获取:var showMonthAfterYear=$(' .选择器)。datepicker('option ',' showMonthAfterYear ');
设置:$('.选择器)。datepicker('option ',' showMonthAfterYear ',true);
showOn:字符串:"聚焦"
设置什么事件触发显示日期插件的面板,可选值:焦点、按钮、两者
初始:$('.选择器)。日期选取器({ showOn:' both ' });
获取:var showOn=$(' .选择器)。datepicker('option ',' showOn ');
设置:$('.选择器)。datepicker('option ',' showOn ',' both ');
显示选项:选项:{}
如果使用showAnim来显示动画效果的话,可以通过此参数来增加一些附加的参数设置。
初始:$('。选择器)。date picker({ show options:{ direction:' up ' });
Get: var show options=$('。选择器)。datepicker ('option ',' show options ');
设置:$('。选择器)。datepicker ('option ',' show options ',{ direction:' up ');
showOtherMonths:布尔值:false
是否在当前面板中显示前两个月和后两个月的一些日期数字(可选)。
初始:$('。选择器)。date picker({ showothermonths:true });
Get: var showothermonths=$('。选择器)。datepicker ('option ',' showothermonths ');
设置:$('。选择器)。datepicker ('option ',' showothermonths ',true);
stepMonths:数字:1
当点击“上一月/下一月”时,一次浏览几个月。
初始:$('。选择器)。date picker({ step months:3 });
Get: var stepmonths=$('。选择器)。datepicker ('option ',' step months ');
设置:$('。选择器)。datepicker ('option ',' stepmonths ',3);
yearRange:字符串:“-10: 10”
控制年下拉列表中显示的年数可以是相对于当年的(-nn: nn),也可以是绝对值(-nnnn: nnnn)。
初始:$('。选择器)。date picker({ year range:' 2000:2010 ' });
Get: var年范围=$('。选择器)。datepicker ('option ','年份范围');
设置:$('。选择器)。datepicker ('option ','年份范围',' 2000:2010 ');
beforeShow:函数(输入)
在日期控件显示面板之前触发此事件,并返回当前触发该事件的控件的实例对象。
初始:$('。选择器)。date picker({ before show:function(input){.}});
beforeShowDay:函数(日期)
在日期控件显示面板之前,当绑定每个面板上的日期时会触发此事件,参数是触发事件的日期。调用函数后,必须返回一个数组:[0]此日期是否可选(true/false),[1]此日期的CSS样式名称('表示默认),[2]鼠标移过时出现提示。
初始:$('。选择器)。date picker({ before show day:function(date){.}});
onChangeMonthYear:函数(年、月、月)
当年份或月份发生变化时,会触发此事件。这些参数是更改的年、月和当前日期插件实例。
初始:$('。选择器)。date picker({ onchangemontyear:function(year,month,inst) {.}});
onClose : function(dateText,inst)
当日期面板关闭时,将触发此事件(无论是否有选定的日期)。参数是选定的日期和当前日期插件实例。
初始:$('。选择器)。date picker({ on close:function(date text,inst) {.}});
onSelect:函数(日期文本,实例)
当在日期面板中选择日期时,将触发此事件。参数是选定的日期和当前日期插件实例。
$('.选择器)。date picker({ on select:function(date text,inst) {.} });
以上内容介绍了JQuery datepicker的用法。我希望你喜欢它。
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。