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 相关文章推荐
css图片自适应大小
Nov 28 Javascript
二级域名或跨域共享Cookies的实现方法
Aug 07 Javascript
js 操作符实例代码
Oct 24 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
Dec 30 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
Javascript 获取鼠标当前的位置实现方法
Oct 27 Javascript
vue.js学习笔记之绑定style样式和class列表
Oct 31 Javascript
Node.js中的http请求客户端示例(request client)
May 04 Javascript
微信头像地址失效踩坑记附带解决方案
Sep 23 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 Javascript
JavaScript实现密码强度实时验证
Mar 18 Javascript
JS字符串补全方法padStart()和padEnd()
May 27 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中设置时区,记录日志文件的实现代码
2013/01/07 PHP
php购物车实现方法
2015/01/03 PHP
Yii实现的多级联动下拉菜单
2016/07/13 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
JS倒计时实例_天时分秒
2017/08/22 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
python实现简单温度转换的方法
2015/03/13 Python
mac下给python3安装requests库和scrapy库的实例
2018/06/13 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
python+numpy+matplotalib实现梯度下降法
2018/08/31 Python
利用python循环创建多个文件的方法
2018/10/25 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
python 实现按对象传值
2019/12/26 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
基于python3.7利用Motor来异步读写Mongodb提高效率(推荐)
2020/04/29 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
武汉某公司的C#笔试题面试题
2015/12/25 面试题
MIS软件工程师的面试题
2016/04/22 面试题
宿舍使用违章电器检讨书
2014/01/12 职场文书
《寓言两则》教学反思
2014/02/27 职场文书
反腐倡廉演讲稿
2014/05/22 职场文书
医药公司采购员岗位职责
2014/09/12 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
2014年城管个人工作总结
2014/12/08 职场文书
2019事业单位个人工作总结范文
2019/08/26 职场文书
JavaScript 对象创建的3种方法
2021/11/17 Javascript
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL