铁雪资源网 Design By www.gsvan.com

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

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

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

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

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

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

<</SPAN>scripttype="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.7.1.min.js">

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

<</SPAN>div class="demo">
<</SPAN>p>Date:<</SPAN>input type="text" id="datepicker"></</SPAN>p>
</</SPAN>div>

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

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

效果截图:

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

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

<</SPAN>div class="demo">
<</SPAN>p>Date: <</SPAN>input type="text" id="datepicker">
<</SPAN>input type="text" id="alternate" 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时间控件的使用方法(加强版)

8、showOn:设置触发选择器的事件名称
buttonText:指定触发按钮上显示的文本,showOn属性应设置为button或both
buttonImage:指定弹出按钮图像的URL,若设置则buttonText将成为alt值
buttonImageOnly:是否将图像放在控件后面,作为触发器,如果设置为true那么按钮将只剩下图片作为按钮,是页面更加美观
这里我编写三个文本框进行以上属性的对比:
1) Js代码:

$( "#datepicker2" ).datepicker({
showOn: "both",
buttonText:"日历按钮"
});

效果截图:

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

2)将按钮设置为图片:
Js代码:

$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true
});

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

通过以上对比,可以理解buttonImageOnly属性的作用。
9、minDate:可以选择的最小日期,null表示无限制
maxDate:可以选择的最大日期。null表示无限制
两者都是根据以当天日期为基础的。
Js代码:

$(function() {
$( "#datepicker" ).datepicker({
//表示以当天为准,只有在20天之前和10天之后的日期之间的时间可以选择
minDate: -20,
maxDate: "+10D"
});
});

如下图在7号之前都不可选择(当前日期为27):

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

以上就是对jquery UI Datepicker时间控件的使用方法深入学习,为之后的学习打下了基础,希望大家继续关注jquery UI Datepicker时间控件终结篇学习。

标签:
jquery.ui.datepicker,jquery.ui.datepicker,jquery.datepicker,jquery.ui时间控件

铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com

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

暂无jquery UI Datepicker时间控件的使用方法(加强版)的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?