文档章节

JQuery日期插件datepicker的使用

Yemon
 Yemon
发布于 2016/05/17 10:33
字数 1334
阅读 18
收藏 0

JQuery是一款非常优秀的脚本框架,其丰富的控件使用起来也非常简单,配置非常灵活。下面做一个使用日期插件datapicker的例子。 

1、下载jQuery核心文件就不用说了吧,datepicker是轻量级插件,只需jQuery的min版本就行了,然后到官网http://jqueryui.com/download下载jquery-ui压缩包(可以选择喜欢的theme),里面就包含对datepicker的支持,当然您也可以网站http://marcgrabanski.com/pages/code/jquery-ui-datepicker下载datepicker,包括ui.core.js和ui.datepicker.js。

2、在HTML中引用下载下来的js文件: 

 

[xhtml]  view plain  copy
  1.        <!-- 引入 jQuery -->  
  2. <mce:script src="js/jquery.1.4.2.js" mce_src="js/jquery-1.5.1.min.js" type="text/javascript"></mce:script>  
  3. <!--添加datepicker支持-->  
  4. <mce:script src="js/jquery.ui.core.js" mce_src="js/jquery.ui.core.js" type="text/javascript"></mce:script>  
  5. <mce:script src="js/jquery.ui.datepicker.js" mce_src="js/jquery.ui.datepicker.js" type="text/javascript"></mce:script>  

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

[xhtml]  view plain  copy
  1. <!--引入样式css-->  
  2. type="text/css" rel="stylesheet" href="css/jquery-ui-1.8.13.custom.css" mce_href="css/jquery-ui-1.7.3.custom.css" />  

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

 

[xhtml]  view plain  copy
  1. <input type="text" id="selectDate" readonly="readonly"/>  

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

[xhtml]  view plain  copy
  1. $(document).ready(function() {     
  2.       $('#selectDate').datepicker();     
  3.   });  

效果如下图:

这里只是做了一个最基本的日期控件,我们还需要以中文显示,限制日期选择范围等需求,稍微修改js代码:

[javascript]  view plain  copy
  1. <mce:script type="text/javascript"><!--  
  2.     //等待dom元素加载完毕.  
  3.         $(function(){  
  4.             $("#selectDate").datepicker({//添加日期选择功能  
  5.             numberOfMonths:1,//显示几个月  
  6.             showButtonPanel:true,//是否显示按钮面板  
  7.             dateFormat: 'yy-mm-dd',//日期格式  
  8.             clearText:"清除",//清除日期的按钮名称  
  9.             closeText:"关闭",//关闭选择框的按钮名称  
  10.             yearSuffix: '年'//年的后缀  
  11.             showMonthAfterYear:true,//是否把月放在年的后面  
  12.             defaultDate:'2011-03-10',//默认日期  
  13.             minDate:'2011-03-05',//最小日期  
  14.             maxDate:'2011-03-20',//最大日期  
  15.             monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],  
  16.             dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],  
  17.             dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],  
  18.             dayNamesMin: ['日','一','二','三','四','五','六'],  
  19.             onSelect: function(selectedDate) {//选择日期后执行的操作  
  20.                 alert(selectedDate);  
  21.             }  
  22.             });  
  23.         });  
  24.       
  25. // --></mce:script>  

效果如下:

这里基本上就满足我们使用的需要了。datepicker控件默认是英文的,可以在构造datepicker时通过monthNames、dayNames属性来指定月、日的中文显示值,但是每次使用是都配置这些属性不免太麻烦了,可以增加一个js文件将中文配置都放在里面,每次使用直接引用即可,这里放在jquery.ui.datepicker-zh-CN.js中,内容如下:

[javascript]  view plain  copy
  1. jQuery(function($){  
  2.     $.datepicker.regional['zh-CN'] = {  
  3.         closeText: '关闭',  
  4.         prevText: '<上月',  
  5.         nextText: '下月>',  
  6.         currentText: '今天',  
  7.         monthNames: ['一月','二月','三月','四月','五月','六月',  
  8.         '七月','八月','九月','十月','十一月','十二月'],  
  9.         monthNamesShort: ['一','二','三','四','五','六',  
  10.         '七','八','九','十','十一','十二'],  
  11.         dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],  
  12.         dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],  
  13.         dayNamesMin: ['日','一','二','三','四','五','六'],  
  14.         weekHeader: '周',  
  15.         dateFormat: 'yy-mm-dd',  
  16.         firstDay: 1,  
  17.         isRTL: false,  
  18.         showMonthAfterYear: true,  
  19.         yearSuffix: '年'};  
  20.     $.datepicker.setDefaults($.datepicker.regional['zh-CN']);  
  21. });  

6.在页面中引入中文插件

[javascript]  view plain  copy
  1. <!-- 添加中文支持-->  
  2.     <mce:script src="js/jquery.ui.datepicker-zh-CN.js" mce_src="js/jquery.ui.datepicker-zh-CN.js" type="text/javascript"></mce:script>  

完整的页面代码如下:

 

[xhtml]  view plain  copy
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <HTML>  
  3.  <HEAD>  
  4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.   <TITLE>日期控件datepicker</TITLE>  
  6.       
  7.     <!-- 引入 jQuery -->  
  8.     <mce:script src="js/jquery.1.4.2.js" mce_src="js/jquery.1.4.2.js" type="text/javascript"></mce:script>  
  9.   
  10.     <!--添加datepicker支持-->  
  11.     <mce:script src="js/jquery.ui.core.js" mce_src="js/jquery.ui.core.js" type="text/javascript"></mce:script>  
  12.     <mce:script src="js/jquery.ui.datepicker.js" mce_src="js/jquery.ui.datepicker.js" type="text/javascript"></mce:script>  
  13.     <!-- 或者引入jquery ui包,其中也包含对datepicker的支持  
  14.     <mce:script src="js/jquery-ui-1.7.3.custom.min.js" mce_src="js/jquery-ui-1.7.3.custom.min.js" type="text/javascript"></mce:script>  
  15.     -->  
  16.   
  17.     <!--引入样式css-->  
  18.     <link type="text/css" rel="stylesheet" href="css/jquery-ui-1.7.3.custom.css" mce_href="css/jquery-ui-1.7.3.custom.css" />  
  19.   
  20.     <!-- 添加中文支持-->  
  21.     <mce:script src="js/jquery.ui.datepicker-zh-CN.js" mce_src="js/jquery.ui.datepicker-zh-CN.js" type="text/javascript"></mce:script>  
  22.   
  23.     <mce:script type="text/javascript"><!--  
  24.     //等待dom元素加载完毕.  
  25.         $(function(){  
  26.             $("#selectDate").datepicker({//添加日期选择功能  
  27.             numberOfMonths:1,//显示几个月  
  28.             showButtonPanel:true,//是否显示按钮面板  
  29.             dateFormat: 'yy-mm-dd',//日期格式  
  30.             clearText:"清除",//清除日期的按钮名称  
  31.             closeText:"关闭",//关闭选择框的按钮名称  
  32.             yearSuffix: '年', //年的后缀  
  33.             showMonthAfterYear:true,//是否把月放在年的后面  
  34.             defaultDate:'2011-03-10',//默认日期  
  35.             minDate:'2011-03-05',//最小日期  
  36.             maxDate:'2011-03-20',//最大日期  
  37.             //monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],  
  38.             //dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],  
  39.             //dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],  
  40.             //dayNamesMin: ['日','一','二','三','四','五','六'],  
  41.             onSelect: function(selectedDate) {//选择日期后执行的操作  
  42.                 alert(selectedDate);  
  43.             }  
  44.             });  
  45.         });  
  46.       
  47. // --></mce:script>  
  48.  </HEAD>  
  49.  <BODY>  
  50.   <input type="text" id="selectDate" readonly="readonly"/>  
  51.  </BODY>  
  52. </HTML>  

 

注意:由于jquery datepicker首页http://marcgrabanski.com/articles/jquery-ui-datepicker上ui.core.js和ui.datepicker.js不是最新版本的,如果下载新版本jquery-ui-1.8.13中的css文件会造成日期控件不能显示的问题,所以这里使用了1.7.3的ui。简单一点就是用jquery-ui的压缩js。

本文转载自:http://blog.csdn.net/hj7jay/article/details/51050482

共有 人打赏支持
Yemon
粉丝 10
博文 322
码字总数 23853
作品 0
广州
架构师
私信 提问
25个有用的jQuery日历和日期选取插件

jQuery被认为是最好的JavaScript库,因为它简单易用、灵活,并有大量的插件。 本文介绍25个非常不错的jQuery日历和日期选取插件,希望对各位有用。您也可以在OSCHINA的开源软件库查找更多的j...

老枪
2011/03/11
21.9K
17
jQuery UI Datepicker 添加时分秒

默认的jQuery UI Datepicker控件没有显示时分秒功能,需要进行时分秒插件的安装及配置。 demo 地址根据自己的环境去改正 下载地址:http://download.csdn.net/download/panruifang/8518257 ...

梦梦阁
2017/11/01
0
0
【jQuery-UI】jQuery Timepicker Addon--时间选择插件

jQuery UI官方的日期控件Datepicker中没有提供时间(时分秒)的选择,还好网上有人写了针对jQuery UI Datepciker的插件 - jQuery Timepicker Addon,它依赖于jQuery UI中的datepicker和slide...

5W1H-
2013/01/10
0
4
25 个最棒的 jQuery 日期时间选择器

jQuery 日期时间选择插件允许您将datepicker功能添加到您的网站,提供更好的用户体验。本文向你推荐 25 个超棒的 jQuery 日期时间选择插件。 走起! 1. jQuery Timer Plugin 2. Timepicki 3....

oschina
2015/01/03
18.4K
12
解决 jQuery UI Datepicker 无法弹出日期的问题

今天遇到一个意想不到的bug,在使用jQuery UI Datepicker 时无法弹出日期选择框。 经过和官方的演示案例对比,最终找到了问题所在。 我使用的错误方法: <input type="text" id="to" name="t...

轻松筹社长
2014/03/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

添加并发

<!-- 认购线程池,支持最大并发送10 最大排队队列为一万--> <task:executor id="investBuyPool" pool-size="1-10" queue-capacity="10000"/> 方法添加注解@Async("investBuyPool")......

一夜
16分钟前
1
0
Gensim?

Gensim是一款开源的第三方Python工具包,用于从原始的非结构化的文本中,无监督地学习到文本隐层的主题向量表达。它支持包括TF-IDF,LSA,LDA,和word2vec在内的多种主题模型算法,支持流式训...

火力全開
29分钟前
1
0
图片验证码

图片验证码,线上登录是最常见的场景,也有发送手机验证码之前进行图片验证码的验证。 图片验证码很大程度上防止机器人撞库登录或频繁发起短信验证码从而使系统暂时性"瘫痪"。 以下是项目中用...

貔貅叔
32分钟前
3
0
科班出身程序员和培训出来的程序员区别在哪?

科班出身只是代表你要从事的职业和你的专业是一致的,代表着你具备了得天独厚的优势,至于是不是优势看你上班好不好学,平时逃课没,上班是认真听还是玩手机。一般而言科班出来的理论性比较强...

java菜分享
32分钟前
1
0
java框架学习日志-8(AOP简介)

小王被委托开发一款游戏,程序分为启动页面,登陆页面,战斗页面等。小王就采用了面向对象编程思想(OOP),把整个程序分解成下图 这种就是传统的自上而下的编程,或者说纵向的编程,负责启动...

白话
32分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部