这篇文章主要为大家详细介绍了 jQuery 日历插件 datepicker 用法,感兴趣的小伙伴们可以参考一下
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
jQuery 是一款不可多得的非常优秀的 javascript 脚本开发库,而基于其上的很多插件也是非常规范和卓越的,如果错过这番美景真是太可惜了,比如 datepicker 这个插件。
一般 MIS 系统的前端,尤其是用户注册页面,都会有诸如 "出身年月" 的日期输入框,最简单的做法就是使用一个 <input type="text"/> 标签,这样做的弊端有很多:首先是与数据库字段类型的匹配、其次是输入日期的合法性如 "13 月" 或者闰年等等问题,如果深入下去还有非常多的地方值得推敲。当前比较流行的做法是使用下拉菜单 <select><option></option></select> 来构造,但是这样做无论交互性、复杂度和可移植性都不尽如人意,因为至少需要构建 3 个联动的下拉菜单,需要自己编写大量的脚本处理日期合法性。
datepicker 带来了美好的春天,先看看使用默认样式时它的样子:
完全 GUI 般的用户体验,炫目的动态展现效果,精确的日期控制和高度的灵活的参数配置,这一切使得 datepicker 受到众多开发者的青睐,其中包括大名鼎鼎的 google,在其 google calendar 项目中就使用了这个脚本,有兴趣可以去看看。顺便啰嗦一句,上图的默认效果,在 javascript 中,用户只需写一句话就可以实现了,怎么样,心动了吧,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>
来源: http://www.phperz.com/article/17/0405/266847.html