最近在做前端的东西比较多，为更好的掌握的前端技能水平，想通过写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>
日历组件代码还需要改进，包括功能改进、如何被其它页面调用等，有空再继续完善
