自定义JS台历
日期：2014-05-16 浏览次数：20464 次
自定义JS日历
<script>
//服务器返回当前年,月,日
var year=2011;
var month=8;
var day=4;
var serviceDate;
//设置当前时间
function setMyDate(year,month){
//设置当月第一天时间
serviceDate=new Date(year,month-1,1,0,0,0,0);
document.getElementById("nowYear").value=year;
document.getElementById("nowMonth").value=month;
}
//初始化下拉框
function initSelect(){
var yearSelect=document.getElementById("nowYear");
var monthSelect=document.getElementById("nowMonth");
for(var i=0;i<50;i++){
yearSelect.options.add(new Option(1990+i,1990+i));
}
for(var i=1;i<13;i++){
monthSelect.options.add(new Option(i,i));
}
}
//返回当前年份月份天数
function getMonthDay(year,month){
var monthDay=[0,31,28,31,30,31,30,31,31,30,31,30,31];
//是否闰年
if((year%4==0&&year%100!=0)||year%400==0){
monthDay[1]=29;
}
return monthDay[month];
}
//设置日期，星期对应
function setMonthValue(year,month,day){
var dayValue=getMonthDay(year,month);
//当月第一天所对应星期
var oneDay=serviceDate.getDay();
var calenDarArray=[];
for(var i=1,j=0;i<=dayValue;i++){
if(i==1){
calenDarArray[j]=[];
calenDarArray[j][oneDay]=i;
i=7-oneDay;
}
else{
calenDarArray[j]=[];
calenDarArray[j][0]=i;
i=6+i;
}
j++;
}
return calenDarArray;
}
//设置日期到表格
function setDateToTable(year,month,day){
var mytable=document.getElementById("dateTable");
var tr6=document.getElementById("tr6");
var calenDarArray=setMonthValue(year,month,day);
var monthDay=getMonthDay(year,month);
if(calenDarArray.length==5){
tr6.style.display="none";
}
else{
tr6.style.display="block";
}
for(var i=0;i<calenDarArray.length;i++){
var row=mytable.rows[i+2];
var index=0;
for(var j=0;j<7;j++){
var cell=row.cells[j];
if(calenDarArray[i][j]!=undefined){
index=j;
cell.innerHTML=calenDarArray[i][index]++;
}
else{
cell.innerHTML=(calenDarArray[i][index]==undefined || calenDarArray[i][index]>monthDay)?" ":calenDarArray[i][index]++;
}
}
}
}
//显示日历
function initCalenDar(year,month,day){
setMyDate(year,month);
setDateToTable(year,month,day);
}
function fnYearChange(year){
var month=document.getElementById("nowMonth").value;
initCalenDar(year,month);
}
function fnMonthChange(month){
var year=document.getElementById("nowYear").value;
initCalenDar(year,month);
}
window.onload=function(){
initSelect();
initCalenDar(year,month);
}
</script>
<body>
<table id="dateTable" border="1" width="500" >
<tr>
<td colspan="7" height="20">
年份：<select id="nowYear" onchange="fnYearChange(this.value)"></select>
月份：<select id="nowMonth" onchange="fnMonthChange(this.value)"></select>
</td>
</tr>
<tr>
<td>周日</td><td>周一</td><td>周二</td><td>周三</td><td>周四</td><td>周五</td><td>周六</td>
</tr>
<tr id="tr1">
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
</tr>
<tr id="tr2">
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
</tr>
<tr id="tr3">
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
