页面HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS输出日历</title>
<style type="text/css">
/* global css document => author:intval@163.com */
html{height:100%;-overflow-y:scroll;border:0}body{min-height:100%;-height:100%;position:relative}
body,h1,h2,h3,h4,h5,h6,p,div,dl,dt,dd,ul,ol,li,form,button,input,textarea,th,td{margin:0;padding:0;border:0}
h1,h2,h3,h4,h5,h6,select,input,textarea,button,table{font-size:100%;font-weight:normal}
ul,ol,dl{list-style:none}a{text-decoration:none;color:#36c}u{text-decoration:none}i,em{font-style:normal}
a:hover{text-decoration:underline}a img{border:none}a,select,input,textarea{outline:none}.fr{float:right}
table{border-collapse:collapse;border-spacing:0}th{text-align:left;font-weight:normal}.fl{float:left}
.cf:before,.cf:after{content:"";display:table}.cf:after{clear:both}.cf{+zoom:1}
body{color:#000;background:#fff;font:12px/15px Microsoft YaHei} #u-calender{padding:50px 0 0 200px}
#u-calender #u-slt{font-size:14px}
#u-slt select{font:13px Verdana}
#u-calender .z-on{background:#36c;color:#fff; font-weight:700}
#u-calender .z-pass{background:#efefef;color:#ccc}
#u-calender table{ border-top:1px solid #ccc; border-right:1px solid #ccc; width:300px}
#u-calender table tr td{ border-bottom:1px solid #ccc; border-left:1px solid #ccc;text-align:center;padding:5px 0}
</style>
</head>
<body>
<div id="u-calender">
<table class="calender"><tr><td colspan="7" id="u-slt"></td></tr><tr id="u-week"></tr></table>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="calendar.js"></script>
</div>
</body>
</html>
下面是calendar.js的代码
$(document).ready(function(){
function createCalendar(year, month){
var _Date = new Date(), _thenYear = _Date.getFullYear(), _thenMonth = _Date.getMonth() + 1, _thenDay = _Date.getDate();
var aryMonth = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'];
var aryWeek = ['日', '一', '二', '三', '四', '五', '六'];
// 年份
var ech = 8;
var _year = year ? parseInt(year) : _thenYear;
var _selectYear = ' 年份:<select id="u-year">';
for(var i = (_year + ech), n = (_year - ech); i >= n; i--){
var _selected = (_year == i) ? ' selected="selected"' : '';
_selectYear += '<option value="'+ i +'"'+ _selected +'>'+ i +'</option>';
}
_selectYear += '</select>';
// 月份
var _month = month ? parseInt(month) : _thenMonth;
var _selectMonth = '月份:<select id="u-month">';
for(var i = 0, n = aryMonth.length; i < n; i++){
var _selected = (_month == (i+1)) ? ' selected="selected"' : '';
_selectMonth += '<option value="'+ (i+1) +'"'+ _selected +'>'+ aryMonth[i] +'月</option>';
}
_selectMonth += '</select> ';
// 加入月份和年份的下拉控件
$('#u-slt').html(_selectMonth + _selectYear);
// 输出日期排序
var _selectWeek = '';
for(var i = 0, n = aryWeek.length; i < n; i++){
_selectWeek += '<td>周'+ aryWeek[i] +'</td>';
}
$('#u-week').html(_selectWeek);
// 当月的总天数 和 当月第一天是星期几
var maxDay = _date(_year, _month);
var first = _date(_year, _month, 'firstDay');
// 当月的总天数的数组
var aryDay = _range(1, maxDay);
// 第一排的空位数 用 上月后几位日期 填补
if(first % 7 != 0){
var prevDay = _date(_year, (_month - 1)); // 上月的总天数
var aryFirst = _range(prevDay - first + 1, prevDay);
aryDay = aryFirst.concat(aryDay);
}
// 最后排的空位数 用 下月的前几位日期填补
var lenLast = aryDay.length, last = 7 - lenLast % 7;
var aryLast = last % 7 == 0 ? '' : _range(1, last);
if(aryLast != '') aryDay = aryDay.concat(aryLast);
// 日期循环输出 且 写入Body
var _trHtml = '<tr class="u-day">';
for(var i = 0, n = aryDay.length; i < n; i++){
var strDay = aryDay[i];
var dayPass = (i < first || i >= lenLast) ? ' class="z-pass"' : ''; // 上月或下月的日期变灰色
var dayOn = (_year == _thenYear && _month == _thenMonth && strDay == _thenDay && dayPass == '') ? ' class="z-on"' : '';
_trHtml += '<td'+ dayOn + dayPass +'>'+ _sprintf(strDay) +'</td>';
if((i + 1) % 7 == 0) _trHtml += '</tr><tr class="u-day">';
}
_trHtml += '</tr>';
_trHtml = _trHtml.replace('<tr class="u-day"></tr>', '');
$('.calender').append(_trHtml);
}
// 默认加载日历
createCalendar();
// 下拉项的点击变换事件
$('#u-year, #u-month').live('change', function(){
var y = $('#u-year').val(), m = $('#u-month').val();
$('.u-day').remove();
createCalendar(y, m);
});
// 返回日历的信息值(当月或上月总天数，当月第一天是星期几)
function _date(year, month, type){
var ary = new Date(year, month, 0);
if(type == 'firstDay'){
ary.setDate(1);
return ary.getDay();
}else{
return ary.getDate();
}
}
// 创建日期的数组
function _range(x, y){
var ary = Array();
var i = 0; // 必须从0开始，否则.length获取的长度不准确
for(x; x <= y; x++){
ary[i] = x;
i++;
}
return ary;
}
// 补齐小于10的数值前的0
function _sprintf(val){
var str = val.toString();
if(val < 10) str = '0' + str;
return str;
}
});
代码完成后实现的效果截图：