jquery日期控件使用,起止时间
来源:互联网 发布:linux下修改静态ip 编辑:程序博客网 时间:2024/05/17 22:33
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文件:
<!-- 引入 jQuery --><script type='text/javascript' src='<%=path%>/firecity/js/jquery-1.7.1.min.js'></script><script src="<%=path%>/firecity/js/devidepage.js" type="text/javascript"></script><!--添加datepicker支持--> <script src="<%=path %>/firecity/js/jquery.ui.datepicker.js" type="text/javascript"></script><script src="<%=path %>/firecity/js/jquery.ui.core.js" type="text/javascript"></script><!-- 添加中文支持--><script src="<%=path %>/firecity/js/jquery.ui.datepicker-zh-CN.js" type="text/javascript"></script>
3.在HTML中引入默认样式表文件,这个文件在ui压缩包中。如果在官网下载,首页就有这个CSS文件下载,也可选择其他皮肤的CSS。
<link rel="stylesheet" href="<%=path %>/firecity/css/jqueryUI/jquery-ui.css" type="text/css"><link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
4.在HTML中插入文本域,最好设置成只读,不接受用户的手动输入,防止格式混乱,以id标记好。
日期 : <input type="text" size="10" maxlength="10" class="fromdate" id="fromdate" readonly="readonly"/> 至 <input type="text" size="10" maxlength="10" class="enddate" id="enddate" readonly="readonly"/>
5、编写js代码,实现最终效果
$(document).ready(function() { $('#fromdate').datepicker(); $('#enddate').datepicker(); });这里只是做了一个最基本的日期控件,我们还需要以中文显示,限制日期选择范围等需求,稍微修改js代码:
这里基本上就满足我们使用的需要了。datepicker控件默认是英文的,可以在构造datepicker时通过monthNames、dayNames属性来指定月、日的中文显示值,但是每次使用是都配置这些属性不免太麻烦了,可以增加一个js文件将中文配置都放在里面,每次使用直接引用即可,这里放在jquery.ui.datepicker-zh-CN.js中,内容如下:
jQuery(function($){ $.datepicker.regional['zh-CN'] = { clearText: '清除', clearStatus: '清除已选日期', closeText: '关闭', prevText: '<上月', nextText: '下月>', currentText: '今天', monthNames: ['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月'], monthNamesShort: ['一','二','三','四','五','六', '七','八','九','十','十一','十二'], dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'], dayNamesMin: ['日','一','二','三','四','五','六'], weekHeader: '周', dateFormat: 'yy-mm-dd', firstDay: 1, isRTL: false, showMonthAfterYear: true, yearSuffix: '年'}; $.datepicker.setDefaults($.datepicker.regional['zh-CN']); });
完整的页面代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <TITLE>日期控件datepicker</TITLE> <!-- 引入 jQuery --><script type='text/javascript' src='<%=path%>/firecity/js/jquery-1.7.1.min.js'></script><script src="<%=path%>/firecity/js/devidepage.js" type="text/javascript"></script><!--添加datepicker支持--> <script src="<%=path %>/firecity/js/jquery.ui.datepicker.js" type="text/javascript"></script><script src="<%=path %>/firecity/js/jquery.ui.core.js" type="text/javascript"></script><!-- 添加中文支持--><script src="<%=path %>/firecity/js/jquery.ui.datepicker-zh-CN.js" type="text/javascript"></script> <!--引入样式css--> <link rel="stylesheet" href="<%=path %>/firecity/css/jqueryUI/jquery-ui.css" type="text/css"> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script type='text/javascript'><!-- //等待dom元素加载完毕. $(document).ready(function() { $(".fromdata").datepicker({//添加日期选择功能 numberOfMonths:1,//显示几个月 showButtonPanel:true,//是否显示按钮面板 showClearButton: true ,changeMonth:false,defaultDate:+1, // showWeek: true, howOn:"button", //borth 既可以触发按钮 又可以触发文本框 弹出 日历 如果是button 只能触发button事件 buttonImageOnly: true, //设置这按钮只显示图片效果 不要有button的样式 showAnim:"toggle", //弹出日历的效果buttonText: 'Choose',hideIfNoPrevNext: true,dateFormat: 'yy-mm-dd',//日期格式 clearText:"清除",//清除日期的按钮名称 closeText:"关闭",//关闭选择框的按钮名称 yearSuffix: '年', //年的后缀 showMonthAfterYear:true,//是否把月放在年的后面 defaultDate:'2013-03-10',//默认日期 minDate:'2014-03-05',//最小日期 maxDate:'2024-03-20',//最大日期 onSelect: function( selectedDate ) { $( ".enddata" ).datepicker( "option", "minDate", new Date(selectedDate.replace(/-/g,',')) );//结束时间可选最小值为选中值} }); $(".enddata").datepicker({//添加日期选择功能 numberOfMonths:1,//显示几个月 showButtonPanel:true,//是否显示按钮面板 showClearButton: true ,changeMonth:false,defaultDate:+1, // showWeek: true, howOn:"button", //borth 既可以触发按钮 又可以触发文本框 弹出 日历 如果是button 只能触发button事件 buttonImageOnly: true, //设置这按钮只显示图片效果 不要有button的样式 showAnim:"toggle", //弹出日历的效果buttonText: 'Choose',hideIfNoPrevNext: true,dateFormat: 'yy-mm-dd',//日期格式 clearText:"清除",//清除日期的按钮名称 closeText:"关闭",//关闭选择框的按钮名称 yearSuffix: '年', //年的后缀 showMonthAfterYear:true,//是否把月放在年的后面 defaultDate:'2013-03-10',//默认日期 minDate:'2014-03-05',//最小日期 maxDate:'2024-03-20',//最大日期 onSelect: function( selectedDate ) {$( ".fromdata" ).datepicker( "option", "maxDate", new Date(selectedDate.replace(/-/g,',')) );//起始时间可选最大值为选中值} });}); // --></script> </HEAD> <BODY> 日期 : <input type="text" size="10" maxlength="10" class="fromdate" id="fromdate" readonly="readonly"/> 至 <input type="text" size="10" maxlength="10" class="enddate" id="enddate" readonly="readonly"/> </BODY> </HTML>
注意:如果不加上
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
会导致日期控件中的选择上下月的图标不能正常显示,是因为本地没有可引用的图片资源
1 0
- jquery日期控件使用,起止时间
- jquery日期控件使用,起止时间
- jquery日期时间控件
- 根据当前日期获取本周起止时间
- 根据当前日期获取本周起止时间
- 【转】根据起止日期+时间取数
- jQuery DateTimePicker 时间日期控件
- JQuery 时间 + 日期 的控件
- jQuery DateTimePicker时间日期控件
- jQuery DateTimePicker 日期时间控件
- Jquery日期控件使用
- Jquery日期控件使用
- Jquery日期控件使用
- js 日期控件 无插件,支持中英文,设置起止日期
- 日期、时间控件的使用
- 时间日期控件的使用
- layui时间日期控件使用
- jquery-ui日期时间控件实现
- 大S女儿户籍,户籍就备受中两岸百姓关注
- Using setJavaScriptEnabled can Introduce XSS Vulnerabilities into&
- 最新版TCPCOPY的下载安装及使用
- POJ 1269 Intersecting Lines
- eXtremeComponents(简称ec)是一系列提供高级显示的开源JSP定制标签
- jquery日期控件使用,起止时间
- JSF2.0实战 - 1、Hello World
- 使用xStream框架从JavaBean对象转换成XML文档转换成Java对象
- sizeof(union) 、sizeof(struct) 和内存对齐技术
- 读C++ concurrency in action笔记
- Oracle时间转换成字符串
- 提高linux下的socket通信效率
- Struts2 验证码图片实例
- 最简单的基于FFMPEG+SDL的音频播放器