jquery日期控件使用,起止时间

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文件：

[html] view
plain copy

print?

  1. <!-- 引入 jQuery -->
  2. <script type=‘text/javascript‘ src=‘<%=path%>/firecity/js/jquery-1.7.1.min.js‘></script>
  3. <script src="<%=path%>/firecity/js/devidepage.js" type="text/javascript"></script>
  4. <!--添加datepicker支持-->
  5. <script src="<%=path %>/firecity/js/jquery.ui.datepicker.js" type="text/javascript"></script>
  6. <script src="<%=path %>/firecity/js/jquery.ui.core.js" type="text/javascript"></script>
  7. <!-- 添加中文支持-->
  8. <script src="<%=path %>/firecity/js/jquery.ui.datepicker-zh-CN.js" type="text/javascript"></script>

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

[html] view
plain copy

print?

  1. <link rel="stylesheet" href="<%=path %>/firecity/css/jqueryUI/jquery-ui.css" type="text/css">
  2. <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

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

[html] view
plain copy

print?

  1. 日期 :   <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代码，实现最终效果

[html] view
plain copy

print?

  1. $(document).ready(function() {
  2. $(‘#fromdate‘).datepicker();
  3. $(‘#enddate‘).datepicker();
  4. });

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

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

[javascript] view
plain copy

print?

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

完整的页面代码如下：

[html] view
plain copy

print?

  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. <!-- 引入 jQuery -->
  7. <script type=‘text/javascript‘ src=‘<%=path%>/firecity/js/jquery-1.7.1.min.js‘></script>
  8. <script src="<%=path%>/firecity/js/devidepage.js" type="text/javascript"></script>
  9. <!--添加datepicker支持-->
  10. <script src="<%=path %>/firecity/js/jquery.ui.datepicker.js" type="text/javascript"></script>
  11. <script src="<%=path %>/firecity/js/jquery.ui.core.js" type="text/javascript"></script>
  12. <!-- 添加中文支持-->
  13. <script src="<%=path %>/firecity/js/jquery.ui.datepicker-zh-CN.js" type="text/javascript"></script>
  14. <!--引入样式css-->
  15. <link rel="stylesheet" href="<%=path %>/firecity/css/jqueryUI/jquery-ui.css" type="text/css">
  16. <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  17. <script type=‘text/javascript‘><!--
  18. //等待dom元素加载完毕.
  19. $(document).ready(function() {
  20. $(".fromdata").datepicker({//添加日期选择功能
  21. numberOfMonths:1,//显示几个月
  22. showButtonPanel:true,//是否显示按钮面板
  23. showClearButton: true ,
  24. changeMonth:false,
  25. defaultDate:+1,
  26. //   showWeek: true,
  27. howOn:"button", //borth 既可以触发按钮 又可以触发文本框 弹出 日历  如果是button 只能触发button事件
  28. buttonImageOnly: true,       //设置这按钮只显示图片效果 不要有button的样式
  29. showAnim:"toggle", //弹出日历的效果
  30. buttonText: ‘Choose‘,
  31. hideIfNoPrevNext: true,
  32. dateFormat: ‘yy-mm-dd‘,//日期格式
  33. clearText:"清除",//清除日期的按钮名称
  34. closeText:"关闭",//关闭选择框的按钮名称
  35. yearSuffix: ‘年‘, //年的后缀
  36. showMonthAfterYear:true,//是否把月放在年的后面
  37. defaultDate:‘2013-03-10‘,//默认日期
  38. minDate:‘2014-03-05‘,//最小日期
  39. maxDate:‘2024-03-20‘,//最大日期
  40. onSelect: function( selectedDate ) {
  41. $( ".enddata" ).datepicker( "option", "minDate", new Date(selectedDate.replace(/-/g,‘,‘)) );//结束时间可选最小值为选中值
  42. }
  43. });
  44. $(".enddata").datepicker({//添加日期选择功能
  45. numberOfMonths:1,//显示几个月
  46. showButtonPanel:true,//是否显示按钮面板
  47. showClearButton: true ,
  48. changeMonth:false,
  49. defaultDate:+1,
  50. //   showWeek: true,
  51. howOn:"button", //borth 既可以触发按钮 又可以触发文本框 弹出 日历  如果是button 只能触发button事件
  52. buttonImageOnly: true,       //设置这按钮只显示图片效果 不要有button的样式
  53. showAnim:"toggle", //弹出日历的效果
  54. buttonText: ‘Choose‘,
  55. hideIfNoPrevNext: true,
  56. dateFormat: ‘yy-mm-dd‘,//日期格式
  57. clearText:"清除",//清除日期的按钮名称
  58. closeText:"关闭",//关闭选择框的按钮名称
  59. yearSuffix: ‘年‘, //年的后缀
  60. showMonthAfterYear:true,//是否把月放在年的后面
  61. defaultDate:‘2013-03-10‘,//默认日期
  62. minDate:‘2014-03-05‘,//最小日期
  63. maxDate:‘2024-03-20‘,//最大日期
  64. onSelect: function( selectedDate ) {
  65. $( ".fromdata" ).datepicker( "option", "maxDate", new Date(selectedDate.replace(/-/g,‘,‘)) );//起始时间可选最大值为选中值
  66. }
  67. });
  68. });
  69. // --></script>
  70. </HEAD>
  71. <BODY>
  72. 日期 :   <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"/>
  73. </BODY>
  74. </HTML>

注意：如果不加上

[html] view
plain copy

print?

  1. <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

会导致日期控件中的选择上下月的图标不能正常显示，是因为本地没有可引用的图片资源

时间： 2024-10-05 23:46:53

jquery日期控件使用,起止时间的相关文章

精确到秒的JQuery日期控件

项目中需要用到精确到秒的日期控件,到网上搜了一下,发现有一个JQuery控件可以实现该功能---TimerPicker.但是官网上没有提供该控件的完整Demo,而且没有提供汉化包,所以自己汉化了一下,以供需要的朋友参考. 效果图如下: 首先在页面中引用一下库: <link type="text/css" href="css/jquery-ui-1.8.17.custom.css" rel="stylesheet" /> <lin

Jquery 日期控件

JQuery(2)  版权声明:本文为博主原创文章,未经博主允许不得转载. JQuery是一款非常优秀的脚本框架,其丰富的控件使用起来也非常简单,配置非常灵活.下面做一个使用日期插件datapicker的例子. 1.下载jQuery核心文件就不用说了吧,datepicker是轻量级插件,只需jQuery的min版本就行了,然后到官网http://jqueryui.com/download下载jquery-ui压缩包(可以选择喜欢的theme),里面就包含对datepicker的支持,当然您也可以

jQuery Datepicker日期控件

datepicker可以为bootstrap添加一个事件选择控件,适用于任何需要调用的场合,支持多种事件格式输出(比如:dd, d, mm, m, yyyy, yy等),是制作网页不可缺失的插件. Requirements Bootstrap 2.0.4+ jQuery 1.7.1+ 在线文档 Datepicker基础使用 Datepicker功能定制 Datepicker英文文档 Datepicker中文文档 Datepicker项目主页 简单示例 var nowTemp =newDate()

jquery datepicker日期控件用法

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head runat=

mui 时间日期控件(浏览器上无法查看,在手机端可以点击)

<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <link href="css/mui.mi

jQuery LayDate 日期控件

她基于原生JavaScript精心雕琢,兼容了包括IE6在内的所有主流浏览器.她具备优雅的内部代码,良好的性能体验,和完善的皮肤体系,并且完全开源,你可以任意获取开发版源代码,一扫某些传统日期控件的封闭与狭隘.layDate本着资源共享的开发者精神和对网页日历交互无穷的追求,延续了layui一贯的简单与易用.她遵循LGPL协议,您可以免费将她用于任何个人项目. 版本 LayDate 1.1 作者:闲心贤 github 在线实例 实例预览 layDate - js日期控件与时间插件演示 实例预览 

Android ApiDemos 学习——时间日期控件

时间日期进程会用到平时的开发中,android内置了两种可交互的时间日期控件,一种是对话框形式的,一种是内嵌式的. 分别使用了android的类TimePickerDialog.DatePickerDialog以及TimePicker,其中TimePicker需要在layout中进行设置 对话框形式的时间控件 public class DateDialog extends Activity { // where we display the selected date and time priv

My97DatePicker时间日期控件的使用

My97DatePicker是一款非常灵活好用的日期控件.使用非常简单. 1.下载My97DatePicker组件包 2.在页面中引入该组件js文件: <script type="text/javascript" src="My97DatePicker/WdatePicker.js"></script> 3.页面使用两个方式: 常规调用:  <input id="d11" type="text"

Jquery Mobile日期控件mobiscroll

1.日期控件 参考:http://www.cnblogs.com/hxling/archive/2012/12/12/2814207.html http://www.wglong.com/main/artical!details?id=11 <link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" /> <script sr