jQuery日历插件datepicker用法详解


Posted in Javascript onMarch 03, 2016

 jQuery是一款不可多得的非常优秀的javascript脚本开发库,而基于其上的很多插件也是非常规范和卓越的,如果错过这番美景真是太可惜了,比如datepicker这个插件。

一般MIS系统的前端,尤其是用户注册页面,都会有诸如“出身年月”的日期输入框,最简单的做法就是使用一个<input type="text"/>标签,这样做的弊端有很多:首先是与数据库字段类型的匹配、其次是输入日期的合法性如“13月”或者闰年等等问题,如果深入下去还有非常多的地方值得推敲。当前比较流行的做法是使用下拉菜单<select><option></option></select>来构造,但是这样做无论交互性、复杂度和可移植性都不尽如人意,因为至少需要构建3个联动的下拉菜单,需要自己编写大量的脚本处理日期合法性。

datepicker带来了美好的春天,先看看使用默认样式时它的样子:

jQuery日历插件datepicker用法详解

完全GUI般的用户体验,炫目的动态展现效果,精确的日期控制和高度的灵活的参数配置,这一切使得datepicker受到众多开发者的青睐,其中包括大名鼎鼎的google,在其google calendar项目中就使用了这个脚本,有兴趣可以去看看。顺便??乱痪洌?贤嫉哪?闲Ч???avascript中,用户只需写一句话就可以实现了,怎么样,心动了吧,follow me:

1.下载jQuery核心文件就不用说了吧,datepicker是轻量级插件,只需jQuery的min版本就行了,然后下载datepicker(内含jQuery1.2.6_min),您也可以到官方网站下载:http://marcgrabanski.com/pages/code/jquery-ui-datepicker。

2.在HTML中引用下载下来的两个js:

<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script language="javascript" src="js/ui.datepicker.js"></script>

3.在HTML中引入默认样式表文件,这个文件也在刚刚的压缩包中,如果在官网下载,首页就有这个CSS文件下载,也可选择其他皮肤的CSS:

<link rel="stylesheet" href="js/ui.datepicker.css" type="text/css" media="screen" title="core css file" charset="utf-8" />

4.在HTML中插入文本域,最好设置成只读,不接受用户的手动输入,防止格式混乱,以id标记好。

<input id="dateinput" type="text" readonly="readonly"/>

5.编写js代码,实现最终效果。

<script language="javascript">
$(document).ready(function() { 
 $('#dateinput').datepicker(); 
 }); 
</script>

这样就基本完成一个日期输入文本域了,但是是英文的,根据不同的MIS系统,有的目标人群是上了年级的用户,建议将界面改成中文,可以如此操作,稍微改动一下刚刚的函数,like this:

<script language="javascript">
$(document).ready(function() { 
 $('#dateinput').datepicker({ 
  dateFormat: 'yy-mm-dd', //日期格式,自己设置
  buttonImage: 'calendar.gif', //按钮的图片路径,自己设置
  buttonImageOnly: true, //Show an image trigger without any button.
  showOn: 'both',//触发条件,both表示点击文本域和图片按钮都生效
 yearRange: '1990:2008',//年份范围
 clearText:'清除',//下面的就不用详细写注释了吧,呵呵,都是些文本设置
 closeText:'关闭',
 prevText:'前一月',
 nextText:'后一月',
 currentText:' ',
 monthNames:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
 }); 
 }); 
</script>

OK,大功告成,我根据自己的要求,写的页面的代码如下,仅供参考,自己尝试一下吧:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="js/ui.datepicker.css" type="text/css" media="screen" title="core css file" charset="utf-8" />
<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script language="javascript" src="js/ui.datepicker.js"></script>
<script language="javascript">
$(document).ready(function() { 
 var yearFrom=new Date().getYear()-60+1900;
 var yearTo=new Date().getYear()-18+1900; 
 $('#dateinput').datepicker({ 
 dateFormat: 'yy-mm-dd', 
 buttonImage: 'calendar.gif', 
 buttonImageOnly: true, 
 showOn: 'both',
 yearRange: yearFrom+':'+yearTo,
 clearText:'清除',
 closeText:'关闭',
 prevText:'前一月',
 nextText:'后一月',
 currentText:' ',
 monthNames:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
 }); 
 }); 
</script>
</head>
<body>
<input id="dateinput" type="text" readonly="readonly"/>
</body>
</html>

以上就是关于jQuery日历插件datepicker用法详细介绍,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JS父页面与子页面相互传值方法
Mar 05 Javascript
Jquery easyUI 更新行示例
Mar 06 Javascript
Javascript冒泡排序算法详解
Dec 03 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 Javascript
AngularJS过滤器filter用法分析
Dec 11 Javascript
Bootstrap源码解读导航条(7)
Dec 23 Javascript
js仿搜狐视频记录片列表展示效果
May 30 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
Aug 02 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 Javascript
初步使用Node连接Mysql数据库
Mar 03 #Javascript
初步使用bootstrap快速创建页面
Mar 03 #Javascript
JS动态增删表格行的方法
Mar 03 #Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 #Javascript
基于javascript html5实现多文件上传
Mar 03 #Javascript
编写高质量JavaScript代码的基本要点
Mar 02 #Javascript
JS获取当前脚本文件的绝对路径
Mar 02 #Javascript
You might like
关于php内存不够用的快速解决方法
2013/10/26 PHP
php利用事务处理转账问题
2015/04/22 PHP
php如何实现只替换一次或N次
2015/10/29 PHP
php pthreads多线程的安装与使用
2016/01/19 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
2012/06/20 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
tween.js缓动补间动画算法示例
2018/02/13 Javascript
微信小程序左滑动显示菜单功能的实现
2018/06/14 Javascript
详解ECMAScript typeof用法
2018/07/25 Javascript
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
对angularJs中$sce服务安全显示html文本的实例
2018/09/30 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
js实现移动端轮播图
2020/12/21 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
vue 授权获取微信openId操作
2020/11/13 Javascript
[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场
2018/04/06 DOTA
Python语言的12个基础知识点小结
2014/07/10 Python
Python获取Windows或Linux主机名称通用函数分享
2014/11/22 Python
如何利用Fabric自动化你的任务
2016/10/20 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
Python八皇后问题解答过程详解
2019/07/29 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
向领导表决心的话
2014/03/11 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
大学生英文求职信范文
2015/03/19 职场文书
银行柜员工作心得体会
2016/01/23 职场文书