先来看看Datepicker插件的属性表： [img]http://files.jb51.net/file_images/article/201511/2015117111727667.jpg?2015107111735[/img] [img]http://files.jb51.net/file_images/article/201511/2015117111742112.jpg?2015107111751[/img] [img]http://files.jb51.net/file_images/article/201511/2015117111801656.jpg?201510711188[/img] [img]http://files.jb51.net/file_images/article/201511/2015117111818543.jpg?2015107111827[/img] [b]第一个日历插件的使用实例[/b] 首先导入需要的类库文件： 首先进行页面代码的编写： [img]http://files.jb51.net/file_images/article/201511/2015117111844979.jpg?2015107111851[/img] 然后使用js代码对插件进行调用 效果截图： [img]http://files.jb51.net/file_images/article/201511/2015117111908039.png?2015107111917[/img] 下面通过实例对一些常用属性进行验证： [b]1、altField ：[/b]使用备用的输出字段，即将选择的日期以另一种格式，输出到另一个控件中，值为选择符，即要输出的控件 altFormat：altField输出的格式 实例验证： 页面代码： [img]http://files.jb51.net/file_images/article/201511/2015117111934512.jpg?201510711200[/img] [b]Js代码： [/b] 效果截图： [img]http://files.jb51.net/file_images/article/201511/2015117112023267.png?2015107112032[/img] [b]2、showAnim：[/b]设置日期面板显示或隐藏的动画名 js代码的编写： [b]3、showButtonPanel：[/b]是否显示按钮面板 Js代码： [javascript] view plaincopyprint? $( "#datepicker" ).datepicker({ showButtonPanel:true }); 如图可以看到面板下方有两个按钮：点击“今天”会跳到今天的日期，点击“关闭”会关闭面板。 [img]http://files.jb51.net/file_images/article/201511/2015117112154586.png?201510711222[/img] [b]4、dateFormat：[/b]指定显示日期的格式 Js代码： 效果截图： [img]http://files.jb51.net/file_images/article/201511/2015117112231975.png?2015107112239[/img] 通过图像可以看到，文本框中日期格式由以前的“yy-mm-dd”转变成了“by/mm/dd”。当然还有别的格式，可以根据自己的喜好进行设置。 [b]5、changeMonth：[/b]是否使用下拉列表选择月份 changeYear：是否使用下拉列表选择年份 在js代码中添加此属性：changeMonth:true 或者 changeYear:true 其中标题栏的月份或者年份会出现下拉菜单的形式： [img]http://files.jb51.net/file_images/article/201511/2015117112307099.png?2015107112315[/img] [b]6、yearRange：[/b]设置下拉列表框中显示的年份范围，可以是相对今年（-nn:+nn）或相对于选择的年份（c-nn:c+nn）或绝对年份（nnnn:nnnn） 在js代码中添加属性： 效果截图： [img]http://files.jb51.net/file_images/article/201511/2015117112324531.png?2015107112332[/img] 从图中可以看到年的位置为下拉菜单的形式，其中下拉菜单只会出现2011与2012年的选项。 注：yearRange属性只有在changeYear为true的情况下才使用。 [b] 7、numberOfMonths：[/b]设置一次要显示几个月。可以为包含两个数字的数组，表示显示的行数和列数 Js代码： 上面指定numberOfMonths为3，那么弹出的日历面板就会显示当前以及以后两个月，如图： [img]http://files.jb51.net/file_images/article/201511/2015117112904189.png?2015107112913[/img] [b]8、showOn：[/b]设置触发选择器的事件名称 buttonText：指定触发按钮上显示的文本，showOn属性应设置为button或both buttonImage：指定弹出按钮图像的URL，若设置则buttonText将成为alt值 buttonImageOnly：是否将图像放在控件后面，作为触发器，如果设置为true那么按钮将只剩下图片作为按钮，是页面更加美观 这里我编写三个文本框进行以上属性的对比： 1) Js代码： 效果截图： [img]http://files.jb51.net/file_images/article/201511/2015117113056159.png?201510711313[/img] 2）将按钮设置为图片： Js代码： [img]http://files.jb51.net/file_images/article/201511/2015117113009476.jpg?2015107113017[/img] 通过以上对比，可以理解buttonImageOnly属性的作用。 [b]9、minDate：[/b]可以选择的最小日期，null表示无限制 [b]maxDate：[/b]可以选择的最大日期。null表示无限制 两者都是根据以当天日期为基础的。 Js代码： 如下图在7号之前都不可选择（当前日期为27）： [img]http://files.jb51.net/file_images/article/201511/2015117113110417.png?2015107113118[/img] 以上就是对jquery UI Datepicker时间控件的使用方法深入学习，为之后的学习打下了基础，希望大家继续关注jquery UI Datepicker时间控件终结篇学习。