最近项目中要将一个日期组件替换掉，研究了下jQuery的datequicker组件，相当不错！下面为大家介绍一下其用法：
1、从jquery的官网下载datequicker组件（注意只下载这个组件及其依赖包）
2、整理js,css到不同的目录，最终在页面上这样去引用：
<link rel="stylesheet" href="css/jquery.ui.all.css">
<script src="js/jquery-1.6.2.js"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.datepicker.js"></script>
<script src="js/jquery.ui.datepicker-zh-CN.js"></script>
3、由于每个页面中的日期组件不止一个，要做到对input组件加上日期组件，把渲染的js代码封装一下比较好，故end.js如下
/** init jquery datepicker instanses*/
if (typeof(dateInputIds) != "undefined") {
$(function() {
for(var dateInputId in dateInputIds) {
$( "#" + dateInputIds[dateInputId] ).datepicker({
showOn: "button",
buttonImage: "images/Calendar.gif",
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
yearRange: '1900:2040'
});
}
});
}
4、这样以来，在start.js里申明一各数组，如下
var dateInputIds = [];
5、在页面中要渲染一个日期的input，只需要做两步：指定input组件的id;将id压入dateInputIds数组中，示例如下：
<div>
起始日期: <input type="text" id="startDate">
终止日期: <input type="text" id="endDate">
出生日期: <input type="text" id="birthday">
</div>
<script>
dateInputIds.push("startDate");
dateInputIds.push("endDate");
dateInputIds.push("birthday");
</script>
6、最终一个示例的html页面如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="author" content="redhacker(beanor#gmail.com)" />
<title>jQuery UI Datepicker</title>
<link rel="stylesheet" href="css/jquery.ui.all.css">
<script src="js/jquery-1.6.2.js"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.datepicker.js"></script>
<script src="js/jquery.ui.datepicker-zh-CN.js"></script>
<script src="js/start.js"></script>
</head>
<body>
<div>
<p>起始日期: <input type="text" id="startDate"></p>
<p>终止日期: <input type="text" id="endDate"></p>
<p>出生日期: <input type="text" id="birthday"></p>
</div>
<script>
dateInputIds.push("startDate");
dateInputIds.push("endDate");
dateInputIds.push("birthday");
</script>
<script src="js/end.js"></script>
</body>
</html>
分享到：
相关推荐
"使用HTC技术调用jQuery datequicker"这个主题是关于如何结合这两种技术来实现一个日期选择器组件。 jQuery DateQuicker是一个快速、轻量级的日期选择插件，它为网页上的日期输入提供便利。在HTC技术的帮助下，我们...
jquery jqmodal demo 示例 例子 包含了官居网站所能运行例子的源码 本文非原创..压缩包中已注明出处.. 5分共享.望各位理解.. 里边已经带了样式图片..直接运行即可..具体开发自行参照
jQuery打印插件jqprint，jquery.jqprint-0.3.js 下载，内包含使用示例，下载解压可直接在浏览器打开使用。 jQuery打印插件jqprint，jquery.jqprint-0.3.js 下载，内包含使用示例，下载解压可直接在浏览器打开使用。 ...
**jQuery入门小示例** jQuery 是一款非常流行的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画设计和Ajax交互等任务。对于初学者来说，掌握jQuery的基础知识可以大大提高开发效率，减少代码量。本文将...
本教程将通过几个常见的jQuery小例子，深入解析jQuery的核心功能及其使用方法。 1. **选择器**: jQuery的选择器类似于CSS选择器，用于选取HTML元素。例如，`$("#myDiv")`会选择ID为"myDiv"的元素，`$(".myClass")`...
example-jquery-shim, 通过shim配置使用jQuery和jQuery插件的示例项目 在 shim 配置中使用jQuery和 require.js的示例。本示例显示一种用 require.js. jQuery本身寄存器加载jQuery和jQuery插件的方法，可以以轻松加载...
"jQuery实例完整例子"提供了丰富的示例，帮助初学者和有经验的开发者更好地理解和应用jQuery库，尤其在创建高级特效方面。 在jQuery中，特效是其魅力之一，它们使网页更具吸引力和互动性。例如，`slideUp()`和`...
本压缩包“jQuery所有经典例子”包含了众多实用的jQuery代码示例，旨在帮助开发者深入理解和掌握jQuery的核心功能。 1. **DOM操作**：jQuery提供了一套简洁的API来操作HTML文档对象模型（DOM）。例如，通过`$("#id...
在本实践案例中，我们探讨的是使用jQuery库创建一个简单的图片浏览应用。jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画效果以及AJAX交互等常见任务。在这个"jquery图片浏览例子"中，我们将深入...
资源名称：jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介：《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库，从...
本篇文章将深入探讨jQuery Validate插件的基本概念、主要功能以及一个实际的应用示例。 jQuery Validate插件的安装和引入相对简单，只需在HTML文件中包含jQuery库和jQuery Validate的JS文件即可。通常，我们会通过...
下面我们将详细介绍 `jQuery.zclip` 的使用方法及其工作原理。 ### 1. 安装与引入 首先，你需要在项目中引入 `jQuery` 和 `jQuery.zclip` 插件的 JavaScript 文件，以及 `ZeroClipboard.swf` 这个 Flash 对象。在...
"jquery产品展示示例"这个主题聚焦于如何使用jQuery来创建一个吸引人的、动态的产品展示界面。下面我们将深入探讨相关的jQuery知识以及如何应用到产品展示上。 首先，jQuery的核心特性之一是选择器。它使得选取DOM...
jQuery Mobile 使用无刷新技术（AJAX）来实现页面间的平滑切换。通过设置`data-rel="next"`或`data-rel="back"`，可以实现向后或向前的页面跳转。同时，`data-transition`属性可以指定过渡动画，如滑动、淡入淡出等...
描述中提到“js,jQuery使用的小例子”，这意味着压缩包可能包含了JavaScript基础与jQuery结合的示例。JavaScript是网页的脚本语言，而jQuery则是它的增强工具。在JavaScript中，获取和操作元素通常比较复杂，而...
在提供的 "jQuery Demo" 压缩包中，包含了若干 jQuery 的示例代码，你可以通过查看这些示例学习如何使用jQuery实现各种功能。例如，可能包含有简单的元素选择和操作示例、事件处理示例、动画效果示例以及AJAX请求...
jQuery小例子源码 1.客户端事件的注入.Whindom.onload,jquery-->(document).ready(function(){内容}); 2.css样式表中的元素，类，元素ID是设置，及其就近原则，类高。 3.知道了，css中border属性，background-image...
这个"jquery-easyui 例子"压缩包包含了完整的示例，旨在确保你能直观地看到各种功能的实际效果。 EasyUI 提供了诸如对话框（Dialog）、表格（Grid）、表单（Form）、菜单（Menu）、树形结构（Tree）、下拉选择器...
在"jquery巧妙使用div例子"中，jQuery被用来处理div元素的行为，如监听用户的交互，改变div的状态，并执行相应的动画效果。 其次，jFrame是一个基于jQuery的插件，它提供了创建窗口式界面的能力。jFrame模仿了桌面...