最近看了一下关于js日期的一些函数，突然想到了日历控件，于是试着写了一个，作为后台程序员的我水平有限，大家抱着学习的态度看看我写的这个例子吧，一起学习进步！
首先一个常用的日期函数：
date(year,month,day)
var date=new date();
获取年份
var year=this.date.getfullyear();
获取月份，这里是月索引所以要+1
var month=this.date.getmonth()+1;
获取当天是几号
var day=this.date.getdate();
获取当天是周几，返回0.周日 1.周一 2.周二 3.周三 4.周四 5.周五 6.周六
var week=this.date.getday();
获取当月一号是周几
var getweekday=function(year,month,day){
var date=new date(year,month,day);
return date.getday();
}
var weekstart= getweekday(this.year, this.month-1, 1)
获取当月的天数
var getmonthdays=function(year,month){
var date=new date(year,month,0);
return date.getdate();
}
var monthdays= this.getmonthdays(this.year,this.month);
好了，我们用到的参数就这么多，后面其实就是关于日期对应周几的一些操作和判断，动态的拼接标签，下面就直接把我写的例子发出来：
效果图：
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<head>
<style type="text/css">
td{ text-align: center;}
</style>
<script type="text/javascript">
window.onload=function(){
var calender=function(){
this.init.apply(this,arguments);
}
calender.prototype={
init:function(container,options){
this.date=new date();
this.year=this.date.getfullyear();
this.month=this.date.getmonth()+1;
this.day=this.date.getdate();
this.week=this.date.getday();
this.weekstart=this.getweekday(this.year, this.month-1, 1);
this.monthdays= this.getmonthdays(this.year,this.month);
this.containerdiv=document.getelementbyid(container);
this.options=options!=null?options:{
border:'1px solid green',
width:'400px',
height:'200px',
backgroundcolor:'lightgrey',
fontcolor:'blue'
}
},
getmonthdays:function(year,month){
var date=new date(year,month,0);
return date.getdate();
},
getweekday:function(year,month,day){
var date=new date(year,month,day);
return date.getday();
},
view:function(){
var tablestr='<table>';
tablestr+='<tr><td colspan="3"></td><td>年:'+this.year+'</td><td colspan="3">月：'+this.month+'</td></tr>';
tablestr+='<tr><td width="14%">日</td><td width="14%">一</td><td width="14%">二</td><td width="14%">三</td><td width="14%">四</td><td width="14%">五</td><td width="14%">六</td></tr>';
var index=1;
//判断每月的第一天在哪个位置
var style='';
if(this.weekstart<7)
{
tablestr+='<tr>';
for (var i = 0; i <this.weekstart; i++) {
tablestr+='<td></td>';
};
for (var i = 0; i < 7-this.weekstart; i++) {
style=this.day==(i+1)?"background-color:green;":"";
index++;
tablestr+='<td style="'+style+'" val='+(this.year+'-'+this.month+'-'+(i+1))+'>'+(i+1)+'</td>';
};
tablestr+='</tr>';
}
///剩余天数对应的位置
//判断整数行并且对应相应的位置
var remaindays=this.monthdays-(7-this.weekstart);
var row=math.floor(remaindays%7==0?remaindays/7:((remaindays/7)+1)) ;
var count=math.floor(remaindays/7);
for (var i = 0; i < count; i++) {
tablestr+='<tr>';
for (var k = 0; k < 7; k++) {
style=this.day==(index+k)?"background-color:green;":"";
tablestr+='<td style="'+style+'" val='+(this.year+'-'+this.month+'-'+(index+k))+'>';
tablestr+=index+k;
tablestr+='</td>';
};
tablestr+='</tr>';
index+=7;
};
//最后剩余的天数对应的位置(不能填充一周的那几天)
var remaincols=this.monthdays-(index-1);
tablestr+='<tr>';
for (var i = 0; i < remaincols; i++) {
style=this.day==index?"background-color:green;":"";
tablestr+='<td style="'+style+'" val='+(this.year+'-'+this.month+'-'+(index))+'>';
tablestr+=index;
tablestr+='</td>';
index++;
};
tablestr+='</tr>';
tablestr+='</table>';
return tablestr;
},
render:function(){
var calenderdiv=document.createelement('div');
calenderdiv.style.border=this.options.border;
calenderdiv.style.width=this.options.width;
calenderdiv.style.height=this.options.height;
calenderdiv.style.cursor='pointer';
calenderdiv.style.backgroundcolor=this.options.backgroundcolor;
// calenderdiv.style.color=this.options.fontcolor;
calenderdiv.style.color='red' ;
calenderdiv.onclick=function(e){
var evt=e||window.event;
var target=evt.srcelement||evt.target;
if(target&&target.getattribute('val'))
{
alert(target.getattribute('val'));
}
}
var tablestr=this.view();
this.tablestr=tablestr;
calenderdiv.innerhtml=tablestr;
var div=document.createelement('div');
div.style.width='auto';
div.style.height='auto';
div.appendchild(calenderdiv);
///翻页div
var pagerdiv=document.createelement('div');
pagerdiv.style.width='auto';
pagerdiv.style.height='auto';
var that=this;
///重新设置参数
var resetpara=function(year,month,day){
that.date=new date(year,month,day);
that.year=that.date.getfullyear();
that.month=that.date.getmonth()+1;
that.day=that.date.getdate();
that.week=that.date.getday();
that.weekstart=that.getweekday(that.year, that.month-1, 1);
that.monthdays= that.getmonthdays(that.year,that.month);
}
//上一页
var prebtn=document.createelement('input');
prebtn.type='button';
prebtn.value='<';
prebtn.onclick=function(){
that.containerdiv.removechild(div);
resetpara(that.year,that.month-2,that.day);
that.render();
}
//下一页
var nextbtn=document.createelement('input');
nextbtn.type='button';
nextbtn.value='>';
nextbtn.onclick=function(){
that.containerdiv.removechild(div);
resetpara(that.year,that.month,that.day);
that.render();
}
pagerdiv.appendchild(prebtn);
pagerdiv.appendchild(nextbtn);
div.appendchild(pagerdiv);
var dropdiv=document.createelement('div');
var dropdivstr='';
//选择年份
dropdivstr+='<select id="ddlyear">';
for (var i = 1900; i <= 2100; i++) {
dropdivstr+=
i==that.year
?'<option value="'+i+'" selected="true">'+i+'</option>'
: '<option value="'+i+'">'+i+'</option>';
};
dropdivstr+='</select>';
//选择月份
dropdivstr+='<select id="ddlmonth">';
for (var i = 1; i <= 12; i++) {
dropdivstr+=
i==that.month
?'<option value="'+i+'" selected="true">'+i+'</option>'
: '<option value="'+i+'">'+i+'</option>';
};
dropdivstr+='</select>';
dropdiv.innerhtml=dropdivstr;
div.appendchild(dropdiv);
that.containerdiv.appendchild(div);
///绑定选择年份和月份的事件
var ddlchange=function(){
var ddlyear=document.getelementbyid('ddlyear');
var ddlmonth=document.getelementbyid('ddlmonth');
var yearindex=ddlyear.selectedindex;
var year=ddlyear.options[yearindex].value;
var monthindex=ddlmonth.selectedindex;
var month=ddlmonth.options[monthindex].value;
that.containerdiv.removechild(div);
resetpara(year,month-1,that.day);
that.render();
}
ddlyear.onchange=function(){
ddlchange();
}
ddlmonth.onchange=function(){
ddlchange();
}
}
}
var calender=new calender('dvtest',{
border:'1px solid green',
width:'400px',
height:'200px',
backgroundcolor:''
}
);
calender.render();
}
</script>
</head>
<body>
<div id="dvtest"></div>
</body>
</html>
代码重新做了改动，将视图的table换为了div,是为了解决ie的tableinnerhtml的只读问题。另外加了options是为了可配置性。
上面代码有简单说明，功能是最基础的，如果更深入的做可以进行扩展，希望这篇文章可以给大家一些启发。
更多一起学写js calender日历控件。