jquery UI Datepicker时间控件的使用方法(加强版)

先来看看Datepicker插件的属性表:

jquery UI Datepicker时间控件的使用方法(加强版)

jquery UI Datepicker时间控件的使用方法(加强版)

jquery UI Datepicker时间控件的使用方法(加强版)

jquery UI Datepicker时间控件的使用方法(加强版)

第一个日历插件的使用实例
首先导入需要的类库文件:

<</SPAN>scripttype="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.7.1.min.js"></</SPAN>script> <</SPAN>scripttype="text/javascript" src="${pageContext.request.contextPath }/js/jquery.ui.datepicker-zh-CN.js"></</SPAN>script> <</SPAN>scripttype="text/javascript"src="${pageContext.request.contextPath }/js/jquery-ui-1.8.18.custom.min.js"></</SPAN>script> <</SPAN>linkrel="stylesheet"type="text/css"href="${pageContext.request.contextPath }/css/ui-lightness/jquery-ui-1.8.18.custom.css">

首先进行页面代码的编写:

<</SPAN>div> <</SPAN>p>Date:<</SPAN>input type="text"></</SPAN>p> </</SPAN>div>

jquery UI Datepicker时间控件的使用方法(加强版)

然后使用js代码对插件进行调用

效果截图:

jquery UI Datepicker时间控件的使用方法(加强版)

下面通过实例对一些常用属性进行验证:
1、altField :使用备用的输出字段,即将选择的日期以另一种格式,输出到另一个控件中,值为选择符,即要输出的控件
altFormat:altField输出的格式
实例验证:
页面代码:

<</SPAN>div> <</SPAN>p>Date: <</SPAN>input type="text"> <</SPAN>input type="text" size="30"/></</SPAN>p> </</SPAN>div>

jquery UI Datepicker时间控件的使用方法(加强版)

Js代码:

$(function() { $( "#datepicker" ).datepicker({ altField: "#alternate", altFormat: "DD, d MM, yy" }); });

效果截图:

jquery UI Datepicker时间控件的使用方法(加强版)

2、showAnim:设置日期面板显示或隐藏的动画名
js代码的编写:

$(function() { $( "#datepicker" ).datepicker(); $( "#anim" ).change(function() { $( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() ); }); });

3、showButtonPanel:是否显示按钮面板
Js代码:
[javascript] view plaincopyprint?
$( "#datepicker" ).datepicker({
showButtonPanel:true
});

如图可以看到面板下方有两个按钮:点击“今天”会跳到今天的日期,点击“关闭”会关闭面板。

jquery UI Datepicker时间控件的使用方法(加强版)

4、dateFormat:指定显示日期的格式
Js代码:

$( "#datepicker" ).datepicker({ dateFormat:"yy/mm/dd" });

效果截图:

jquery UI Datepicker时间控件的使用方法(加强版)

通过图像可以看到,文本框中日期格式由以前的“yy-mm-dd”转变成了“by/mm/dd”。当然还有别的格式,可以根据自己的喜好进行设置。
5、changeMonth:是否使用下拉列表选择月份
changeYear:是否使用下拉列表选择年份
在js代码中添加此属性:changeMonth:true 或者 changeYear:true
其中标题栏的月份或者年份会出现下拉菜单的形式:

jquery UI Datepicker时间控件的使用方法(加强版)

6、yearRange:设置下拉列表框中显示的年份范围,可以是相对今年(-nn:+nn)或相对于选择的年份(c-nn:c+nn)或绝对年份(nnnn:nnnn)
在js代码中添加属性:

$( "#datepicker" ).datepicker({ changeYear: true, yearRange:"2011:2012" });

效果截图:

jquery UI Datepicker时间控件的使用方法(加强版)

从图中可以看到年的位置为下拉菜单的形式,其中下拉菜单只会出现2011与2012年的选项。
注:yearRange属性只有在changeYear为true的情况下才使用。

 7、numberOfMonths:设置一次要显示几个月。可以为包含两个数字的数组,表示显示的行数和列数
Js代码:

$( "#datepicker" ).datepicker({ numberOfMonths: 3 });

上面指定numberOfMonths为3,那么弹出的日历面板就会显示当前以及以后两个月,如图:

jquery UI Datepicker时间控件的使用方法(加强版)

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgzxzj.html