仿Windows 7的Javascript日历组件

君淋天下

浏览: 32563 次
性别:
来自: 杭州

最近访客更多访客>>

静坛使者

tianrun

zhanglinux2008

yujiaao

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

最近在做前端的东西比较多，为更好的掌握的前端技能水平，想通过写web前端组件来提供前端代码能力，第一个组件选了Windows 7右下角的日历为模仿对象

效果如下

Javascript代码

		<script type="text/javascript">
			var weekAry = ['日', '一', '二', '三', '四', '五', '六'];
			var monthAry = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
			var currentYear;
			var currentMonth;
			var navYear;
			var attachParent = null;
			var sourcePosition;
			//月份模式选择时的年
			$(document).ready(function() {
				$('#birthday').bind('focus', function() {
					attachParent = $(this);
					sourcePosition = $(this).offset();
					var showDate = new Date();
					render_calendar();
				});

				$('#birthday').bind('focusout', function() {
					//$("#cal").hide();
				});

				$('#n_img').bind('click', function() {
					var neighboring = neighboringMonth(currentYear, currentMonth, 'n');
					render_calendar(new Date(neighboring.year, neighboring.month - 1, 1));
				});

				$('#p_img').bind('click', function() {
					var neighboring = neighboringMonth(currentYear, currentMonth, 'p');
					render_calendar(new Date(neighboring.year, neighboring.month - 1, 1));
				});

				$(document).bind('keypress', function(event) {
					if($('#cal').css('display') == 'block') {
						if(event.keyCode == 27) {//ESC
							$('#cal').hide();
						} else if(event.keyCode == 33) {//Page Up
							var neighboring = neighboringMonth(currentYear, currentMonth, 'p');
							render_calendar(new Date(neighboring.year, neighboring.month - 1, 1));
						} else if(event.keyCode == 34){//Page Down
							var neighboring = neighboringMonth(currentYear, currentMonth, 'n');
							render_calendar(new Date(neighboring.year, neighboring.month - 1, 1));
						}
					}

				});
			});
			//点击 从输入框中获取日期，然后弹出日历框 跳到对应日期 如果日期为空则为当天日期
			function show_calendar(input) {

			}

			//画日历
			function render_calendar(to_showday) {
				$("#cal_tab thead tr").remove();
				$("#cal_tab tbody tr").remove();
				$('#yms').html("");

				var showday = to_showday || new Date();
				var year = showday.getFullYear();
				var month = showday.getMonth() + 1;
				var day = showday.getDate();
				var dayOfWeek = showday.getDay();
				//星期几

				currentYear = year;
				currentMonth = month;
				navYear = year;

				$("#cal_tab thead").append('<tr></tr>');
				for(var i = 0; i < weekAry.length; i++) {
					$("#cal_tab thead tr").append('<td>' + weekAry[i] + '</td>');
				}

				var firstDay = new Date(year, month - 1, 1);
				//日历显示月的1号
				var firstDayOfWeek = firstDay.getDay();
				//一号是星期几
				var days = getDaysOfMonth(year, month);
				var lastMonthDays = month == 1 ? getDaysOfMonth(year - 1, 12) : getDaysOfMonth(year, month - 1);
				//前一个月有几天

				var dayArry = [];
				//上一个月
				var lastMonthBegin = firstDayOfWeek == 0 ? 7 : firstDayOfWeek;
				for(var i = lastMonthBegin - 1; i >= 0; i--) {
					dayArry.push(lastMonthDays - i);
				}

				//当前月
				for(var i = 1; i <= days; i++) {
					dayArry.push(i);
				}

				//下个月
				var leftDay = 42 - dayArry.length;
				for(var i = 1; i <= leftDay; i++) {
					dayArry.push(i);
				}

				//生成当前月
				$("#cal_tab tbody").append('<tr></tr>');
				for(var i = 0; i < 42; i++) {
					if(i <= lastMonthBegin - 1) {
						$("#cal_tab tbody tr:last").append("<td class='pm d_cell'>" + dayArry[i] + "</td>");
					} else if(i < lastMonthBegin + days) {
						$("#cal_tab tbody tr:last").append("<td class='cm d_cell'>" + dayArry[i] + "</td>");
					} else {
						$("#cal_tab tbody tr:last").append("<td class='nm d_cell'>" + dayArry[i] + "</td>");
					}
					if(i != 0 && (i + 1) % 7 == 0) {
						$("#cal_tab tbody").append('<tr></tr>');
					}
				}

				$('#cal_tab tbody tr td').bind('click', function() {
					if($(this).hasClass('pm')) {
						var neighboring = neighboringMonth(currentYear, currentMonth, 'p');
						$('#birthday').val(neighboring.year + '-' + neighboring.month + '-' + $(this).text());
						$('#cal').hide();
					} else if($(this).hasClass('cm')) {
						$('#birthday').val(currentYear + '-' + currentMonth + '-' + $(this).text());
						$('#cal').hide();
					} else {
						var neighboring = neighboringMonth(currentYear, currentMonth, 'n');
						$('#birthday').val(neighboring.year + '-' + neighboring.month + '-' + $(this).text());
						$('#cal').hide();
					}
				});

				$('#yms').bind('click', showYearTable);
				$('#yms').html(year + "年" + month + "月");
				if(sourcePosition != null){
					$("#cal").css({'left':sourcePosition.left,'top':sourcePosition.top+20,'position':'absolute'});
				} else {
				} 
				
				$("#cal").show();
				$("#day_cal").show();
			}

			function showYearTable() {
				$('#day_cal').hide();
				$('#month_cal table  tr').remove();
				$('#yyyy').html(navYear + '年');
				$('#month_cal table').append('<tr></tr>');
				for(var i = 0; i < monthAry.length; i++) {
					$('#month_cal table tr:last').append("<td class='m_cell' m='" + (i + 1) + "'>" + monthAry[i] + "</td>");
					if((i + 1) % 4 == 0 && i != monthAry.length - 1) {
						$('#month_cal table').append('<tr></tr>')
					}
				}

				// py_img  ny_img
				$('#py_img').unbind('click');
				$('#py_img').bind('click', function() {
					navYear = navYear - 1;
					showYearTable();
				});

				$('#ny_img').unbind('click');
				$('#ny_img').bind('click', function() {
					navYear = navYear + 1;
					showYearTable()
				});

				$('.m_cell').unbind('click');
				$('.m_cell').bind('click', function() {
					var m = $(this).attr('m');
					$('#month_cal').hide();
					$('#day_cal').show();
					render_calendar(new Date(navYear, parseInt(m) - 1, 1));
				});

				$('#cal').show();
				$('#month_cal').show();
			}

			/**
			 * flag 'n' or 'p'
			 */
			function neighboringMonth(year, month, flag) {
				if(flag === 'n') {
					var nYear = month === 12 ? year + 1 : year;
					var nMonth = month === 12 ? 1 : month + 1;
					return {
						'year' : nYear,
						'month' : nMonth
					};
				} else {
					var nYear = month === 1 ? year - 1 : year;
					var nMonth = month === 1 ? 12 : month - 1;
					return {
						'year' : nYear,
						'month' : nMonth
					};
				}
			}

			function getDaysOfMonth(year, month) {
				var dayOfMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
				var dayOfMonthLeap = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
				if(year % 100 == 0 && year % 400 == 0) {
					return dayOfMonthLeap[month - 1];
				} else if(year % 4 == 0) {
					return dayOfMonthLeap[month - 1];
				} else {
					return dayOfMonth[month - 1];
				}
			}
		</script>

html代码

<body>
		<h1>仿Windows 7 日历</h1>
		<form style="position: absolute;top:60px;left: 50px;">
			<label  for="birthday">生日</label>
			<input type="text" style="width: 100px;" class="date_select" id="birthday"/>
			<label  for="birthday">名字</label>
			<input type="text" style="width: 100px;" class="date_select" id="yourname"/>
		</form>
		<div id="cal" style="width: 175px;height: 150px;display: none;">
			<div id="day_cal">
				<div><img src="img/p_month.jpg" id="p_img"/><span id="yms" style=""></span><img src="img/n_month.jpg" id="n_img"/>
				</div>
				<table id="cal_tab">
					<thead>
						<tr></tr>
					</thead>
					<tbody></tbody>
				</table>
			</div>
			<div id="month_cal">
				<div><img src="img/p_month.jpg" id="py_img"/><span id="yyyy"></span><img src="img/n_month.jpg" id="ny_img"/>
				</div>
				<table id="month_tab"></table>
			</div>
		</div>
	</body>

日历组件代码还需要改进，包括功能改进、如何被其它页面调用等，有空再继续完善