简洁的jQuery日历代码.zip资源-CSDN文库

共2个文件

js：1个

html：1个

版权申诉

jquery特效

jquery代码

jquery插件库

105 浏览量 2023-09-20 16:00:37 上传评论收藏 27KB ZIP 举报

【jQuery日历插件开发详解】在Web开发中，日期选择器是一个常见且重要的功能，它可以帮助用户方便地选择日期，常用于表单输入、事件安排等场景。本篇文章将详细解析一个基于jQuery的简洁日历插件，帮助开发者理解和应用此类插件。 jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互，使得创建复杂的Web应用变得更加简单。在jQuery基础上开发日历插件，可以充分利用其强大的DOM操作和事件处理能力，实现高效且兼容性良好的日历功能。在“简洁的jQuery日历代码.zip”中，我们有两个主要文件：index.html和js。`index.html`是展示日历效果的网页，而`js`文件则包含了实现日历功能的JavaScript代码。 1. **HTML结构**： - `index.html`通常会包含一个触发日历显示的元素（如按钮或输入框），以及一个用于显示日历的div容器。例如： ```html <input type="text" id="datePicker" /> <button id="showCalendar">显示日历</button> <div id="calendar"></div> ``` - 这里的`#datePicker`是用户选择日期后显示结果的输入框，`#showCalendar`是触发日历显示的按钮，`#calendar`则是日历将要渲染的地方。 2. **CSS样式**：日历的样式通常通过CSS定义，包括颜色、布局、字体等。虽然在提供的`zip`文件中没有明确的CSS文件，但在实际项目中，开发者可能需要创建一个`style.css`来设置日历的外观，例如： ```css #calendar { display: none; /* 隐藏日历，直到被触发显示 */ position: absolute; /* 使日历可以相对于触发元素定位 */ background-color: white; border: 1px solid #ccc; padding: 10px; } ``` 3. **JavaScript实现**： - `js`文件中的核心部分是使用jQuery来实现日历功能。需要为`#showCalendar`按钮添加点击事件监听器，当点击时显示日历： ```javascript $('#showCalendar').on('click', function() { $('#calendar').toggle(); }); ``` - 接下来，我们需要生成日历的HTML结构并插入到`#calendar`中。这通常涉及到循环和条件判断，以生成月份、星期和日期的表格： ```javascript function createCalendar(currentDate) { // 生成日历的HTML代码... var calendarHTML = '<table><thead><tr>...</tr></thead><tbody>'; for (var i = 0; i < 6; i++) { // 假设每页6行 calendarHTML += '<tr>'; for (var j = 0; j < 7; j++) { // 每行7列 // 计算日期并添加到表格 var date = ...; // 计算逻辑 calendarHTML += '<td>' + date + '</td>'; } calendarHTML += '</tr>'; } calendarHTML += '</tbody></table>'; $('#calendar').html(calendarHTML); } // 初始化日历 var currentDate = new Date(); // 当前日期 createCalendar(currentDate); ``` 4. **日历交互**： - 用户与日历的交互也是必不可少的部分，如选中日期、切换月份等。这可以通过监听表格单元格的点击事件来实现： ```javascript $('#calendar td').on('click', function() { var selectedDate = $(this).text(); $('#datePicker').val(selectedDate); // 隐藏日历或执行其他操作 $('#calendar').hide(); }); ``` 5. **日期计算**： - 在生成日历时，需要根据当前月份计算出正确的日期范围。这涉及到JavaScript的Date对象和相关方法，如`getDate()`、`getMonth()`、`getFullYear()`、`setDate()`等。 6. **扩展功能**： - 实际的日历插件可能还包括其他特性，如禁用特定日期、多语言支持、自定义样式、日期范围选择等。这些可以通过增加额外的配置选项和功能模块来实现。总结，这个简洁的jQuery日历代码示例展示了如何利用jQuery创建一个基本的日期选择器。它涉及到DOM操作、事件处理、日期计算等多个方面，是学习和理解jQuery插件开发的一个良好起点。在实际项目中，开发者可以根据需求进行功能扩展和完善，以满足不同场景的需求。

展开

资源推荐

资源详情

资源评论

收起资源包目录

简洁的jQuery日历代码.zip （2个子文件）

jquery-1.4.min.js 68KB

index.html 15KB

      <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简洁的jQuery日历代码</title>
<style type="text/css">
body {
	background-color: #efefef;
}
#CalendarMain {
	width: 300px;
	height: 300px;
	border: 1px solid #ccc;
	margin: 0 auto;
	margin-top: 100px;
}
#title {
	width: 100%;
	height: 30px;
	background-color: #b9121b;
}
.selectBtn {
	font-weight: 900;
	font-size: 15px;
	color: #fff;
	cursor: pointer;
	text-decoration: none;
	padding: 7px 10px 6px 10px;
}
.selectBtn:hover {
	background-color: #1d953f;
}
.selectYear {
	float: left;
	margin-left: 50px;
	position: absolute;
}
.selectMonth {
	float: left;
	margin-left: 120px;
	position: absolute;
}
.month {
	float: left;
	position: absolute;
}
.nextMonth {
	float: right;
}
.currentDay {
	float: right;
}
#context {
	background-color: #fff;
	width: 100%;
}
.week {
	width: 100%;
	height: 30px;
}
.week>h3 {
	float: left;
	color: #808080;
	text-align: center;
	margin: 0;
	padding: 0;
	margin-top: 5px;
	font-size: 16px;
}
.dayItem {
	float: left;
}
.lastItem {
	color: #d1c7b7 !important;
}
.item {
	color: #333;
	float: left;
	text-align: center;
	cursor: pointer;
	margin: 0;
	font-family: "微软雅黑";
	font-size: 13px;
}
.item:hover {
	color: #b9121b;
}
.currentItem>a {
	background-color: #b9121b;
	width: 25px;
	line-height: 25px;
	float: left;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	color: #fff;
}
#foots {
	width: 100%;
	height: 35px;
	background-color: #fff;
	border-top: 1px solid #ccc;
	margin-top: -1px;
}
#footNow {
	float: right;
	margin: 6px 15px 0 0;
	color: #009ad6;
	font-family: "微软雅黑";
}
#Container {
	overflow: hidden;
	float: left;
}
#center {
	width: 100%;
	overflow: hidden;
}
#centerMain {
	width: 300%;
	margin-left: -100%;
}
#selectYearDiv {
	float: left;
	background-color: #fff;
}
#selectYearDiv>div {
	float: left;
	text-align: center;
	font-family: "微软雅黑";
	font-size: 16px;
	border: 1px solid #ccc;
	margin-left: -1px;
	margin-top: -1px;
	cursor: pointer;
	color: #909090;
}
.currentYearSd, .currentMontSd {
	color: #ff4400 !important;
}
#selectMonthDiv {
	float: left;
	background-color: #fff;
}
#selectMonthDiv>div {
	color: #909090;
	float: left;
	text-align: center;
	font-family: "微软雅黑";
	font-size: 16px;
	border: 1px solid #ccc;
	margin-left: -1px;
	margin-top: -1px;
	cursor: pointer;
}
#selectYearDiv>div:hover, #selectMonthDiv>div:hover {
	background-color: #efefef;
}
#centerCalendarMain {
	float: left;
}
</style>
</head>
<body><script src="/demos/googlegg.js"></script>
<div id="Demo">
<div id="CalendarMain">
  <div id="title"> <a class="selectBtn month" href="javascript:" onClick="CalendarHandler.CalculateLastMonthDays();"><</a><a class="selectBtn selectYear" href="javascript:" onClick="CalendarHandler.CreateSelectYear(CalendarHandler.showYearStart);">2014年</a><a class="selectBtn selectMonth" onClick="CalendarHandler.CreateSelectMonth()">6月</a> <a class="selectBtn nextMonth" href="javascript:" onClick="CalendarHandler.CalculateNextMonthDays();">></a><a class="selectBtn currentDay" href="javascript:" onClick="CalendarHandler.CreateCurrentCalendar(0,0,0);">今天</a></div>
  <div id="context">
    <div class="week">
      <h3> 一 </h3>
      <h3> 二 </h3>
      <h3> 三 </h3>
      <h3> 四 </h3>
      <h3> 五 </h3>
      <h3> 六 </h3>
      <h3> 日 </h3>
    </div>
    <div id="center">
      <div id="centerMain">
        <div id="selectYearDiv"></div>
        <div id="centerCalendarMain">
          <div id="Container"></div>
        </div>
        <div id="selectMonthDiv"></div>
      </div>
    </div>
    <div id="foots"><a id="footNow">19:14:34</a></div>
  </div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript">
		$(document).ready(function(e) {
			CalendarHandler.initialize();
		});

		var CalendarHandler = {
			currentYear: 0,
			currentMonth: 0,
			isRunning: false,
			showYearStart:2009,
			tag:0,
			initialize: function() {
				$calendarItem = this.CreateCalendar(0, 0, 0);
				$("#Container").append($calendarItem);

				$("#context").css("height", $("#CalendarMain").height() - 65 + "px");
				$("#center").css("height", $("#context").height() - 30 + "px");
				$("#selectYearDiv").css("height", $("#context").height() - 30 + "px").css("width", $("#context").width() + "px");
				$("#selectMonthDiv").css("height", $("#context").height() - 30 + "px").css("width", $("#context").width() + "px");
				$("#centerCalendarMain").css("height", $("#context").height() - 30 + "px").css("width", $("#context").width() + "px");

				$calendarItem.css("height", $("#context").height() - 30 + "px"); //.css("visibility","hidden");
				$("#Container").css("height", "0px").css("width", "0px").css("margin-left", $("#context").width() / 2 + "px").css("margin-top", ($("#context").height() - 30) / 2 + "px");
				$("#Container").animate({
					width: $("#context").width() + "px",
					height: ($("#context").height() - 30) * 2 + "px",
					marginLeft: "0px",
					marginTop: "0px"
				}, 300, function() {
					$calendarItem.css("visibility", "visible");
				});
				$(".dayItem").css("width", $("#context").width() + "px");
				var itemPaddintTop = $(".dayItem").height() / 6;
				$(".item").css({
					"width": $(".week").width() / 7 + "px",
					"line-height": itemPaddintTop + "px",
					"height": itemPaddintTop + "px"
				});
				$(".currentItem>a").css("margin-left", ($(".item").width() - 25) / 2 + "px").css("margin-top", ($(".item").height() - 25) / 2 + "px");
				$(".week>h3").css("width", $(".week").width() / 7 + "px");
				this.RunningTime();
			},
			CreateSelectYear: function(showYearStart) {
				CalendarHandler.showYearStart=showYearStart;
				$(".currentDay").show();
				$("#selectYearDiv").children().remove();
				var yearindex = 0;
				for (var i = showYearStart; i < showYearStart+12; i++) {
					yearindex++;
					if(i==showYearStart){
						$last=$("<div>往前</div>");
						$("#selectYearDiv").append($last);
						$last.click(function(){
							CalendarHandler.CreateSelectYear(CalendarHandler.showYearStart-10);
						});
						continue;
					}
					if(i==showYearStart+11){
						$next=$("<div>往后</div>");
						$("#selectYearDiv").append($next);
						$next.click(function(){
							CalendarHandler.CreateSelectYear(CalendarHandler.showYearStart+10);
						});
						continue;
					}
					
					if (i == this.currentYear) {
						$yearItem=$("<div class=\"currentYearSd\" id=\"" + yearindex + "\">" + i + "</div>")
					
					}
					else{
						 $yearItem=$("<div id=\"" + yearindex + "\">" + i + "</div>");
					}
					$("#selectYearDiv").append($yearItem);
					$yearItem.click(function(){
						$calendarItem=CalendarHandler.CreateCalendar(Number($(this).html()),1,1);
						$("#Container").append($calendarItem);
						CalendarHandler.CSS()
					    CalendarHandler.isRunning = true;
					    $($("#Container").find(".dayItem")[0]).animate({
						height: "0px"
					    }, 300, function() {
						$(this).remove();
						CalendarHandler.isRunning = false;
					    });
						$("#centerMain").animate({
						marginLeft: -$("#center").width() + "px"
					}, 500);
					});
					if (yearindex == 1 || yearindex == 5 || yearindex == 9) $("#selectYearDiv").find("#" + yearindex).css("border-left-color", "#fff");
					if (yearindex == 4 || yearindex == 8 || yearindex == 12) $("#selectYearDiv").find("#" + yearindex).css("border-right-color", "#fff");
					
				}
				$("#selectYearDiv>div").css("width", ($("#center").width() - 4) / 4 + "px").css("line-height", ($("#center").height() - 4) / 3 + "px");
				$("#centerMain").animate({
					marginLeft: "0px"
				}, 300);
			},
			CreateSelectMo