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图片轮换效果的函数
Sep 28 Javascript
js控制input框只读实现示例
Jan 20 Javascript
JS日期加减,日期运算代码
Nov 05 Javascript
动态更新highcharts数据的实现方法
May 28 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
jQuery实现弹窗居中效果类似alert()
Feb 27 Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 Javascript
JS设计模式之惰性模式(二)
Sep 29 Javascript
微信小程序工具函数封装
Oct 28 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 SOCKET编程详解
2015/05/22 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
2017/09/15 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
php的instanceof和判断闭包Closure操作示例
2020/01/26 PHP
form中限制文本字节数js代码
2007/06/10 Javascript
js中有关IE版本检测
2012/01/04 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
jQuery中:lt选择器用法实例
2014/12/29 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
Bootstrap插件全集
2016/07/18 Javascript
JS仿百度自动下拉框模糊匹配提示
2016/07/25 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
Python中函数的参数传递与可变长参数介绍
2015/06/30 Python
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
python中的字符串内部换行方法
2018/07/19 Python
python实现录音小程序
2020/10/26 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
python word转pdf代码实例
2019/08/16 Python
python线程中的同步问题及解决方法
2019/08/29 Python
python numpy存取文件的方式
2020/04/01 Python
python二维键值数组生成转json的例子
2019/12/06 Python
美国女士泳装店:Swimsuits For All
2017/03/02 全球购物
行政助理的职责
2013/11/14 职场文书
应征英语教师求职信
2013/11/27 职场文书
年度献血先进个人事迹材料
2014/02/14 职场文书
秋游活动策划方案
2014/02/16 职场文书
研修心得体会
2014/09/04 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
无工作证明怎么写
2015/06/15 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书