自定义JS日历

chinawomen

浏览: 24111 次
性别:
来自: 北京

最近访客更多访客>>

xiehao1020

刘英杰

呵呵的是是

十六之蜗牛

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

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)?"&nbsp;":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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			月份：<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 width=20></td>
		<td height=20 width=20></td>
	</tr>
	<tr id="tr4">
		<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="tr5">
		<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="tr6">
		<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>
</table>
</body>

没事干自己写个小日历就是太丑了功能还不是很完善

分享到：