一个简单的时间插件

最新推荐文章于 2025-05-29 16:36:59 发布

原创最新推荐文章于 2025-05-29 16:36:59 发布 · 302 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #插件 #jqury

本文分享了一个简单实用的jQuery日期选择器插件，通过简单的调用即可实现日期的选择，并支持自定义回调事件。该插件能够显示节假日，并提供丰富的样式定制。

在此分享一个简单好用的jqury时间插件

展示代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>显示节假日的jQuery日期选择器代码</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/hDate.js"></script>
<link href="hDate.css" rel="stylesheet" />
<style type="text/css">
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
outline:none;
}
#Text1,#Text2{padding:7px 5px;outline:none;width:200px;border-radius:3px;border:1px solid #ccc;}
</style>
</head>
<body>
<div style="width:520px;margin:40px auto 0 auto;">
简单调用：<input id="Text1" onClick="calendar.show({ id: this })" type="text" /><br/><br/>
回调事件：<input id="Text2" type="text" />
</div>
<script type="text/javascript">
$("#Text2").click(function (e) {
var ths = this;
calendar.show({
id: this, ok: function () {
alert(ths.value);
}
});
});
</script>
</body>
</html>