<style>
#calendar{
font-size: 12px;
}
#calendar tbody td{
background:#033;
color: #fff;
text-align: center;
padding: 2px;
}
.detail{
text-align:center;
}
</style>
测试值：<input id="calendar_value" name="" type="text" /><br />
<button id="cal_prev">上一月</button>
<button id="cal_next">下一月</button>
<button id="cal_preyear">上一年</button>
<button id="cal_nextyear">下一年</button>
<button id="cal_today">今天</button>
<div id="calendar" style="position:absolute;"></div>
<script>
var Calendar=function(year,monthNum,parent){
this.year=year;
this.parent=parent;
this.monthNum=monthNum-1;
function isLeapYear(y){
return (y>0)&&!(y%4)&&((y%100)||!(y%400));
}
this.numDays=[31,isLeapYear(this.year)?29:28,31,30,31,30,31,31,30,31,30,31][this.monthNum];
this.weekDays=["日","一","二","三","四","五","六"];
this.nowDate=new Date;
this.init();
}
Calendar.prototype={
setMonthNum:function(monthNum){
this.monthNum=monthNum-1;
},
getMonthNum:function(){
return this.monthNum+1;
},
setYearNum:function(year){
this.year=year;
},
getYearNum:function(){
return this.year;
},
init:function(){
this.setup(this.parent);
},
reflesh:function(){
this.setup(this.parent);
},
setup:function(id){
var date=this.nowDate;
var cal=document.getElementById(id);
cal.innerHTML="";
var calDiv=document.createElement("div");
var tab=document.createElement("table");
cal.appendChild(calDiv);
calDiv.innerHTML=this.getSummary();
cal.appendChild(tab);
calDiv.className="detail"
this.thead=document.createElement("thead");
this.tbody=document.createElement("tbody");
this.tfoot=document.createElement("tfoot");
this.tr=document.createElement("tr");
this.td=document.createElement("td");
tab.appendChild(this.thead);
tab.appendChild(this.tbody);
this.setThead();
this.create();
},
setThead:function(){
var day=this.weekDays;
var tr=this.tr.cloneNode(true);
this.thead.appendChild(tr);
for(var i=0;i<7;i++){
var td=this.td.cloneNode(true);
tr.appendChild(td);
td.innerHTML=day[i];
}
},
create:function(){
var day=new Date(this.year,this.monthNum,1);
var tr=this.tr.cloneNode(true);
var dayCount=this.numDays;
var that=this;
that.tbody.appendChild(tr);
for(var j=0;j<day.getDay();j++){
var td=that.td.cloneNode(true);
tr.appendChild(td);
td.innerHTML=" ";
}
for(var i=1;i<=dayCount;i++){
if((j+i)%7-1==0){
tr=that.tr.cloneNode(true);
that.tbody.appendChild(tr);
}
var td=that.td.cloneNode(true);
var s=i;
if(i==that.nowDate.getDate()){
s="<font color='red'>"+i+"</font>";
}
td.innerHTML=s;
td.style.cursor="pointer";
td.onclick=function(){
document.getElementById("calendar_value").value=(that.getYearNum()+"/"+that.getMonthNum()+"/"+this.innerHTML)
}
td.onmouseover=function(){
this.style.background="#fff";
this.style.color="#033"
}
td.onmouseout=function(){
this.style.background="";
this.style.color="#fff"
}
tr.appendChild(td);
}
},
getSummary:function(){
var date=this.nowDate;
return this.year+"年"+(this.monthNum+1)+"月"+date.getDate()+"日";
}
}
var cal=new Calendar(2013,5,"calendar");
cal.init();
document.getElementById("cal_prev").onclick=function(){
cal.monthNum--;
if(cal.getMonthNum()<1){
cal.setMonthNum(12);
cal.year--;
}
cal.reflesh();
}
document.getElementById("cal_next").onclick=function(){
cal.monthNum++
if(cal.getMonthNum()>12){
cal.setMonthNum(1);
cal.year++;
}
cal.reflesh();
}
document.getElementById("cal_today").onclick=function(){
cal.setYearNum((new Date).getFullYear());
cal.setMonthNum((new Date).getMonth()+1)
cal.reflesh();
}
document.getElementById("cal_preyear").onclick=function(){
cal.setYearNum(cal.getYearNum()-1);
cal.reflesh();
}
document.getElementById("cal_nextyear").onclick=function(){
cal.setYearNum(cal.getYearNum()+1);
cal.reflesh();
}
</script>
