JS 动态年历
日期：2014-05-16 浏览次数：20409 次
JS 动态日历
业务中有需要批量设置日期的需求，于是动态日历应运而生。。。。
?
看效果图：
?
?看代码：
?
<html>
<head>
<title>动态日历</title>
<style type="text/css">
table{border:1px solid white;}
thead tr{background-color:#dfe0e4;}
thead tr td{text-align:center;}
#calendar tr td{color: #000000;text-decoration: none;background-color:#EFEFEF;text-align:center;}
</style>
</head>
<body>
年份：<select id="selYear" name="year" onchange="changeCalendar()"></select>
月份：<select id="selMonth" name="month" onchange="changeCalendar()"></select>
<table width="100%" border="1" cellspacing="0" cellpadding="1">
<thead>
<tr>
<td>Sunday</td>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
<td>Thursday</td>
<td>Friday</td>
<td>Saturday</td>
</tr>
</thead>
<tbody id="calendar"></tbody>
</table>
</body>
<script type="text/javascript">
(function(){
var selYear = document.getElementById("selYear");
var selMonth = document.getElementById("selMonth");
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
//生成当前年往前推10往后推5的数据
for(var i = year - 10,len = year + 5; i < len; i++){
var opt = new Option(i + "年", i);
if(i == year) opt.selected = true;
selYear.options.add(opt);
}
//生成月份数据
for(var j = 1; j <= 12; j++){
var m = j < 10 ? "0" + j : j;
var opt = new Option(m + "月", m);
if(j == month) opt.selected = true;
selMonth.options.add(opt);
}
//显示当前月日历
showCalendar(year, month);
})();
//得到每月的天数
function getDaysOfMonth(year, month){
if(year && month){
if(month == 2){
//2月闰年判断
if((year % 4 == 0 && year % 100 !=0) || year % 400 == 0){
return 29;
}
return 28;
}
var bigMonth = [1,3,5,7,8,10,12];
var littleMonth = [4,6,9,11];
for(var m in bigMonth){
if(bigMonth[m] == month)
return 31;
}
for(var m in littleMonth) {
if(littleMonth[m] == month)
return 30;
}
}
}
//根据年月生成日历
function showCalendar(year, month){
if(year && month){
var tbody = document.getElementById("calendar");
//生成前删除之前的行
for(var i = 0,len =tbody.rows.length;i< len;i++){
tbody.deleteRow();
}
var date = new Date(year, month - 1, 1);//month月的第一天
var day = date.getDay();//星期
var days = getDaysOfMonth(year, month);//month月的总天数
var temp = Math.floor((days + day) / 7);
var rows = (days + day) % 7 == 0 ? temp : (temp + 1);//要循环的行数
var d = 1;
for(var i = 1; i <= rows; i++){//循环行
var tr = document.createElement("tr");
for(var j = 1; j <= 7; j++){//循环列
var td = document.createElement("td");
//超过最大天数赋空
if(d > days){
td.innerHTML = "";
tr.appendChild(td);
continue;
}
if(i == 1){
//第一行判断month月第一天是星期几，例如星期二前面空两个周日、周一
if(j >= day + 1){
var html = "<input type='checkbox' name='chkDay'>";
td.innerHTML = html + (d < 10 ? "0" + d : d);
d++;
}else{
td.innerHTML = "";
}
} else {
var html = "<input type='checkbox' name='chkDay'>";
td.innerHTML = html + (d < 10 ? "0" + d : d);
d++;
}
tr.appendChild(td);
}
tbody.appendChild(tr);
}
}
}
function changeCalendar(){
var y = document.getElementById("selYear").value;
var m = document.getElementById("selMonth").value;
showCalendar(y, m);
}
</s
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
