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


Posted in Javascript onNovember 07, 2015

先来看看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 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时间控件终结篇学习。

Javascript 相关文章推荐
javascript 树控件 比较好用
Jun 11 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
Jul 10 Javascript
jquery获取tr并更改tr内容示例代码
Feb 13 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
Jul 18 Javascript
js中window.open打开一个新的页面
Aug 10 Javascript
jQuery增加、删除及修改select option的方法
Aug 19 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
Sep 12 Javascript
vue中如何使用ztree
Feb 06 Javascript
vue用递归组件写树形控件的实例代码
Jul 19 Javascript
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
详解vue 路由跳转四种方式 (带参数)
Apr 28 Javascript
layui多iframe页面控制定时器运行的方法
Sep 05 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
Nov 07 #Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 #Javascript
jquery判断当前浏览器的实现代码
Nov 07 #Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 #Javascript
js识别uc浏览器的代码
Nov 06 #Javascript
详解javascript数组去重问题
Nov 06 #Javascript
基于JavaScript实现仿京东图片轮播效果
Nov 06 #Javascript
You might like
社区(php&amp;&amp;mysql)六
2006/10/09 PHP
二招解决php乱码问题
2012/03/25 PHP
PHP生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
php实现高效获取图片尺寸的方法
2014/12/12 PHP
php检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
PHP convert_uudecode()函数讲解
2019/02/14 PHP
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
javascript 三种编解码方式
2010/02/01 Javascript
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
2018/02/03 Javascript
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
angular4中引入echarts的方法示例
2019/01/29 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
小学后勤管理制度
2014/01/14 职场文书
新浪微博实习心得体会
2014/01/27 职场文书
新书吧创业计划书
2014/01/31 职场文书
清明节网上祭英烈活动总结
2014/04/30 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
导游词400字
2015/02/13 职场文书
养成教育工作总结
2015/08/13 职场文书
导游词之山东红叶谷
2019/10/31 职场文书