JavaScript实现简单日历

页面代码：

<!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>JavaScript Sample</title>

	<style type="text/css">

		div #dataTextContainer

		{

			border:1px #A5ACB2 solid;

			width: 100px;

			height: 19px;

			text-align: right;

			float:left;

		}

		div #dataTextContainer input

		{

			border-width: 0px;

			border-style: none;

			border-color: transparent;

			width: 68px;

			height: 14px;

			font-size: 12px;

			text-align: left;

		}

		div #dataTextContainer button

		{

			width: 22px;

			height: 19px;

			margin: 0px;

			padding:0px;

			text-align: center;

		}

		div #calendarContainer

		{

			width: 200px;

			height: 100px;

			z-index: 10000;

			font-size: 13px;

		}

	</style>

	<script type="text/javascript" src="inputDate.js"></script>

</head>

<body>

	<div id = "dataTextContainer">

		<input name="dataText" id="dateText" type="text" onfocus="javascript:getCurrentDay();"/>

		<button onclick="javascript:displayCalendar();">

			<img src="rili.jpg" width="15" height="12">

		</button>

	</div>

	<div id="calendarContainer"></div>

</body>

</html>

Javascript代码：

    	function getCurrentDay()

    	{

    		var newDate = new Date;

    		var odate = document.getElementById("dateText");

    		var date_year = newDate.getFullYear();

			var date_month = newDate.getMonth() + 1;

			var date_today = newDate.getDate();

    		odate.value = date_year+"-"+date_month+"-"+date_today;

    	}

    	function displayCalendar()

		{

			drawCalendar();

		}

		function closeCalendar()

		{

			var oCalendarContainer = document.getElementById("calendarContainer");

			oCalendarContainer.innerHTML = "";

		}

		function drawCalendar(sYear,sMonth)

		{

			var newDate;

			if(arguments[0] == null || arguments[1] == null)

			{

				newDate = new Date();

			}

			else

			{

				newDate = new Date(sYear,sMonth - 1);

			}

			var date_year = newDate.getFullYear();

			var date_month = newDate.getMonth() + 1;

			var date_today = newDate.getDate();

			var date_day = newDate.getDay();

			var nextMonth = date_month + 1;

			var nextYear = date_year;

			var prevMonth = date_month - 1;

			var prevYear = date_year;

			if(sMonth == 12)

			{

				nextMonth = 1;

				nextYear = date_year + 1;

			}

			if(sMonth == 1)

			{

				prevMonth = 12;

				prevYear = date_year - 1;

			}

			var calendarTable = "";

			calendarTable += '<table width="200" border="0" cellpadding="0" cellspacing="0" style="background-color:#0066FF;text-align:center;">';

			calendarTable += ' <tr style="background-color:#339999;">';

			//向前翻年

			calendarTable += '<td colspan="2" onclick="javascript:drawCalendar('+(prevYear - 1)+','+prevMonth+');"'+

			   		' style="cursor:pointer;background-color:#FF6600;"><<<</td>';

			//向前翻月

			calendarTable += '<td colspan="2" onclick="javascript:drawCalendar('+prevYear+','+prevMonth+');"'+

			   		' style="cursor:pointer;background-color:#FF6600;"><<</td>';

			//向后翻月

			calendarTable += '<td colspan="2" onclick="javascript:drawCalendar('+nextYear+','+nextMonth+');"'+

			   		' style="cursor:pointer;background-color:#FF6600;">>></td>';

			 //向后翻年

			 calendarTable += '<td colspan="1" onclick="javascript:drawCalendar('+(nextYear + 1)+','+nextMonth+');"'+

			   		' style="cursor:pointer;background-color:#FF6600;">>>></td>';

			calendarTable += ' </tr>';

			//星期表头

			calendarTable += '  <tr style="background-color:#6699FF;">';

			calendarTable += '      <td>日</td>';

			calendarTable += '      <td>一</td>';

			calendarTable += '      <td>二</td>';

			calendarTable += '      <td>三</td>';

			calendarTable += '      <td>四</td>';

			calendarTable += '      <td>五</td>';

			calendarTable += '      <td>六</td>';

			calendarTable += '  </tr>';

			//计算一个月内的天数,注意闰月

 			var dayNum_in_month = [31,28,31,30,31,30,31,31,30,31,30,31];

 			var isleapyear = date_year % 4;

 			if(isleapyear == 0)

 			{

 				dayNum_in_month[1] = 29;

 			}

 			var month_alldays = dayNum_in_month[date_month - 1];

 			//计算行数，line_top表示当前日期上面的行数，包含当前行；line_bot表示当前日期以下的行数，不包含当前行

 			var line_top;

 			var line_bot;

 			if((date_today - date_day + 1) % 7 != 0)

 			{

 				line_top = Math.floor((date_today - date_day + 1) / 7) + 1;

 			}

 			else

 			{

 				line_top = Math.floor((date_today - date_day + 1) / 7);

 			}

 			if((30 - date_today + date_day + 1) % 7 != 0)

 			{

 				line_bot = Math.floor((30 - date_today + date_day + 1) / 7) + 1;

 			}

 			else

 			{

 				line_bot = Math.floor((30 - date_today + date_day + 1) / 7);

 			}

 			//定义一个二维数组，预备一个6*7的数组，数组中每一个元素相应一个单元格(日期)

 			var dateList = new Array([""],[""],[""],[""],[""],[""],[""]);

 			var dateCell;

 			for(var i = 1; i < 7; i++)

 			{

 				//i是行数

 				calendarTable += '  <tr>';

 				for(var j = 0; j < 7; j++)

 				{

 					//j是列数

 					dateList[i][j] = date_today - 7 * (line_top - i + 1) + j - date_day;

 					//假设武器<=0，置空

 					if((date_today - 7 * (line_top - i + 1) + j - date_day) <= 0)

 					{

 						dateList[i][j] = " ";

 					}

 					//假设日期大于月总天数，则不显示

 					if((date_today - 7 * (line_top - i + 1) + j - date_day) > month_alldays)

 					{

 						dateList[i][j] = " ";

 					}

 					if(dateList[i][j] != " ")

 					{

 						//假设单元格不是空，那么能够设置其触发三个事件，共同拥有三个事件

 						//1、单击事件，将当前日期写入文本框

 						//2、鼠标指针移到单元格上，改变背景

 						//3、鼠标指针离开单元格，背景复原

 						dateCell =

 									'<td onclick="javascript:setDateText('+date_year+','+date_month+',this.firstChild.nodeValue);"'+'onmouseover="javascript:setFocus(this);"'+'  onmouseout="javascript:setFocusOut(this);"'+ '  style="cursor:pointer;">'+dateList[i][j]+'</td>';

 						if(i == line_top && j == line_bot)

 						{

 							dateCell =

 									'<td onclick="javascript:setDateText('+date_year+','+date_month+',this.firstChild.nodeValue);"'+'onmouseover="javascript:setFocus(this);"'+'  onmouseout="javascript:setFocusOut(this);"'+ '  style="cursor:pointer;background-color:#FF6600;">'+dateList[i][j]+'</td>';

 						}

 					}

 					else

 					{

 						dateCell = "<td> </td>";

 					}

 					calendarTable += dateCell;

 				}

 				calendarTable += '</tr>';

 			}

 			calendarTable += '<tr><td colspan="7"'+'onclick="javascript:closeCalendar();"'+'style="background-color#339999;cursor:pointer;color:red;font-weight:bold">'+'关闭('+date_year+"年"+date_month+"月"+')</td></tr>';

 			calendarTable += '</table>';

 			//将日期写入

 			var oCalendarContainer = document.getElementById("calendarContainer");

 			oCalendarContainer.innerHTML = calendarTable;

 		}

 		//当鼠标指针指到当前日期单元格

 		function setFocus(obj)

 		{

 			obj.style.backgroundColor = "#FF6600";

 		}

 		//当鼠标指针离开当前日期单元格

 		function setFocusOut(obj)

 		{

 			obj.style.backgroundColor = "";

 		}

 		//鼠标单击当前单元格

 		function setDateText(sYear,sMonth,sDate)

 		{

 			var oDateText = document.getElementById("dateText");

 			oDateText.value = sYear + "-" + sMonth + "-" + sDate;

 		}

效果：>>下一月 >>>下一年 <<上一月 <<<上一年

JavaScript实现简单日历的更多相关文章

js编写当天简单日历
之前一直很想用javascript写一个日历,但是因为完全没有好的思路, 所以迟迟没有尝试.最近在网上刚好看到用javascript编写的简单日历的例子,代码量虽然不大, 但是我觉得很好地阐述了js日 ...
js超简单日历
用原生js写了一个超级简单的日历.当做是练习js中的Date类型. 思路: 获取某个日期,根据年份计算出每个月的天数. 利用Date中的getDay()知道该月份的第一天为星期几. 循环创建表格,显示 ...
JavaScript设置简单的自动时间
下面就是一段简单的JavaScript设置简单的自动时间,时间显示在一个输入框input里面. <html> <head> </head> <body> ...
Javascript的简单测试环境
在<JavaScript忍者秘籍>2.4测试条件基础知识中,作者给出了一个精简版的assert和assert组的实现,对于初学者而言,这无疑是一个很好的例子,既让我们得到了一个好用的小工具 ...
javaScript(2)---简单使用
javaScript(2)---简单使用学习要点: 1.创建一张HTML页面 2.<Script>标签解析 3.JS代码嵌入的一些问题一.创建一张HTML页面 <!DOCTYPE ...
Javascript学习-简单测试环境
Javascript学习-简单测试环境在<JavaScript忍者秘籍>2.4测试条件基础知识中,作者给出了一个精简版的assert和assert组的实现,对于初学者而言,这无疑是一个很 ...
JS写一个简单日历
JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
JavaScript中简单排序总结
JavaScript中简单排序总结冒泡排序经典排序算法, 双重for循环在第二个for循环的时候, j < arr.len -1 -i , 这一步的优化很重要 function bullS ...
JavaScript 实现简单的弹出框关闭框
JavaScript 实现简单的弹出框关闭框知识点: 1.javaScript 添加HTML标签 2.javaScript 添加HTML标签属性 3.javaScript 追加元素代码献上: & ...

随机推荐

让struts2和servlet共存
由于struts2默认的是拦截全部的请求由配置文件能够看出 <filter> <filter-name>struts2</filter-name> <fil ...
佛祖保佑,从来没有Bug
<span style="font-size:14px;">// _ooOoo_ // o8888888o // 88" . "88 // (| - ...
错误21002:[SQL-DMO]用户"xxx"已经存在
原文:错误21002:[SQL-DMO]用户"xxx"已经存在转载自:http://topic.csdn.net/u/20120829/09/faf381b6-d4e9-4f97 ...
Android-用你自己的自定义图像资源（2）
Android-自己定义图像资源的使用 2014年4月29日上一篇博客.介绍前面几种图像资源的使用,本篇博客把剩下的所有介绍完: 普通图像资源 XML图像资源 Nine-patch图像资源 XM ...
nginx 提供静态内容
Serving Static Content 提供静态内容原文地址:http://nginx.com/resources/admin-guide/serving-static-content/ Th ...
sqlserver不能直接create table as select
sqlserver不能直接create table as select 在sqlserver 下想复制一张表的,想到oracle下直接create table xxx as select * from ...
仓储Repository
仓储Repository(下) 前言:上篇介绍了下仓储的代码架构示例以及简单分析了仓储了使用优势.本章还是继续来完善下仓储的设计.上章说了,仓储的最主要作用的分离领域层和具体的技术架构,使得领域层更加 ...
Bob大叔观OO原则
Bob大叔观OO原则上篇总结了经典的23种设计模式,详细的解读后期会陆续的详细揭开.使用设计模式的根本原因就是为了增强代码的复用性和可维护性.而面向对象是实现代码复用的有效途径,所以这里有必要了解 ...
ubuntu14.04(64位置) ADB Not Responding
今天装了一个很搞笑的比率Ubuntu14.04 还安装Android studio 写app 执行错误: Adb not responding. you can wait more or ...
Cisco笔试——2014年
笔试时间:11月1日(周六)下午13:00-14:10 申请者考场地点:上海市徐汇区梅陇路130号华东理工大学徐汇校区第六教学楼六大我报的思科的软件开发software,属于(常规) 一共70多道题 ...

JavaScript实现简单日历

JavaScript实现简单日历的更多相关文章

随机推荐

热门专题