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 相关文章推荐
javascript编程起步(第六课)
Feb 27 Javascript
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
在JavaScript中实现类的方式探讨
Aug 28 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
原生js制作简单的数字键盘
Apr 24 Javascript
Angularjs的ng-repeat中去除重复数据的方法
Aug 05 Javascript
JS实现的自动打字效果示例
Mar 10 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
Sep 23 Javascript
JavaScript实现PC端横向轮播图
Feb 07 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
Mar 06 Javascript
Vue Object 的变化侦测实现代码
Apr 15 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
我的论坛源代码(四)
2006/10/09 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
PHP实现的获取文件mimes类型工具类示例
2018/04/08 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
详谈js中window.location.search的用法和作用
2017/02/13 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
BootStrap 导航条实例代码
2017/05/18 Javascript
nodejs结合socket.io实现websocket通信功能的方法
2018/01/12 NodeJs
vue 实现全选全不选的示例代码
2018/03/29 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
jQuery实现简单的Ajax调用功能示例
2019/02/15 jQuery
解决微信小程序中转换时间格式IOS不兼容的问题
2019/02/15 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
React Ant Design树形表格的复杂增删改操作
2020/11/02 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
python中wx将图标显示在右下角的脚本代码
2013/03/08 Python
python爬取51job中hr的邮箱
2016/05/14 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
Intersport西班牙:在线体育商店
2019/11/06 全球购物
圣诞节活动策划方案
2014/06/09 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书
Vue实现动态查询规则生成组件
2021/05/27 Vue.js
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python
移除Selenium中window.navigator.webdriver值
2022/06/10 Python