【实用随记】js日历

#wrapper {
width: 500px;
height: 500px;
margin: 0 auto;
text-align: center;
}
table {
margin: 0 auto;
text-align: center;
border-spacing: 10px 5px
}
td {
text-align: center;
}

<div id="wrapper">
<form>
<select name="year" id="year">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>
<select name="month" id="month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<table>
<tr>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
<th>日</th>
</tr>
<tr class="1">
<td class="1"></td>
<td class="2"></td>
<td class="3"></td>
<td class="4"></td>
<td class="5"></td>
<td class="6"></td>
<td class="7"></td>
</tr>
<tr class="2">
<td class="1"></td>
<td class="2"></td>
<td class="3"></td>
<td class="4"></td>
<td class="5"></td>
<td class="6"></td>
<td class="7"></td>
</tr>
<tr class="3">
<td class="1"></td>
<td class="2"></td>
<td class="3"></td>
<td class="4"></td>
<td class="5"></td>
<td class="6"></td>
<td class="7"></td>
</tr>
<tr class="4">
<td class="1"></td>
<td class="2"></td>
<td class="3"></td>
<td class="4"></td>
<td class="5"></td>
<td class="6"></td>
<td class="7"></td>
</tr>
<tr class="5">
<td class="1"></td>
<td class="2"></td>
<td class="3"></td>
<td class="4"></td>
<td class="5"></td>
<td class="6"></td>
<td class="7"></td>
</tr>
<tr class="6">
<td class="1"></td>
<td class="2"></td>
<td class="3"></td>
<td class="4"></td>
<td class="5"></td>
<td class="6"></td>
<td class="7"></td>
</tr>

</table>
</form>
</div>

(function() {
var year,month;
year = $('#year').val();
month = $('#month').val();
//每个月有多少天
function getDays(year,month){
if(month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12){
return 31;
}else if(month==4 || month == 6 || month == 9 || month == 11){
return 30;
}else if(month==2){
if (leapyear(year)){
return 29;
}else{
return 28;
}
}
}
//是否闰年
function leapyear(year){
if(year%4==0 && year%100!==0){
return true;
}else if(year%400==0){
return true;
}
}
//当月第一天是周几
function getDayofWeek(year,month){
var date = new Date();
date.setFullYear(year);
date.setMonth(month-1);
date.setDate(1);
return date.getDay();
}
//写入table
function writeDown(year,month){
var day = 0;
row = 1;
days = getDays(year,month);
dayofWeek = getDayofWeek(year,month);
if (dayofWeek == 0) {
dayofWeek = 7;
}
for(var i=0; i<6; i++){
for( var j=1; j<=7;j++){
if(j >= dayofWeek || row != 1){
day++;
if(day > days){
break;
}
$('.' + row + ' .' +j).text(day);
}
}
row++;
}
}
$('#year').change(function() {
$('td').text("");
year = $('#year').val();
writeDown(year, month);
});
$('#month').change(function() {
$('td').text("");
month = $('#month').val();
writeDown(year, month);
});

writeDown(year, month);

})();