jQuery datequicker使用示例

最新推荐文章于 2024-05-24 13:39:19 发布

dougq

最新推荐文章于 2024-05-24 13:39:19 发布

阅读量79

点赞数

分类专栏： Web基础文章标签： javascript ui ViewUI

Web基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

最近项目中要将一个日期组件替换掉，研究了下jQuery的datequicker组件，相当不错！下面为大家介绍一下其用法：

1、从jquery的官网下载datequicker组件（注意只下载这个组件及其依赖包）

2、整理js,css到不同的目录，最终在页面上这样去引用：

[code]
<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>
[/code]

3、由于每个页面中的日期组件不止一个，要做到对input组件加上日期组件，把渲染的js代码封装一下比较好，故end.js如下

[code]
/** 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'
});
}
});
}
[/code]

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>

dougq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery datequicker使用示例

最近项目中要将一个日期组件替换掉，研究了下jQuery的datequicker组件，相当不错！下面为大家介绍一下其用法：1、从jquery的官网下载datequicker组件（注意只下载这个组件及其依赖包）2、整理js,css到不同的目录，最终在页面上这样去引用：[code][/code]3、由于每个页面中的日期组件不止一个，要做到对in...
复制链接

扫一扫