jquery日期控件 datepicker,jquery datetimepicker,JQuery datepicker 用法详解

jquery日期控件 datepicker,jquery datetimepicker,JQuery datepicker 用法详解

这篇文章主要介绍了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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

相关文章阅读

  • 使用jquery实现图片轮播效果如何,jQuery图片轮播
  • 使用jquery实现图片轮播效果如何,jQuery图片轮播,使用jQuery实现图片轮播效果
  • 举例说明jquery中each函数的使用,jquery each()
  • 举例说明jquery中each函数的使用,jquery each(),JQuery中each()的使用方法说明
  • 一篇文章带你了解jquery动画人物,一篇文章带你了解jquery动画制作
  • 一篇文章带你了解jquery动画人物,jquery的动画,一篇文章带你了解jQuery动画
  • trigger的用法总结,jquery trigger 传参数
  • trigger的用法总结,jquery trigger 传参数,jQuery中值得注意的trigger方法浅析
  • js hover 触发事件显示另一元素,js hover 触发事件,jQuery中多个元素的Hover事件解决方案
  • js apply 实现原理,jquery apply用法_1
  • js apply 实现原理,jquery apply用法
  • js apply 实现原理,jquery apply用法,js中apply方法的使用详细解析
  • js apply 实现原理,jquery apply用法,JS中apply()的应用实例分析
  • jq获取radio选中的值,jquery radio 取值
  • jq获取radio选中的值,jquery radio 取值,Jquery获取radio选中值实例总结
  • 留言与评论(共有 条评论)
       
    验证码: