function ShowCal(divID,textID,left,top){
    //日历框架的生成以及初始化当日，divID为承载js生成的网页代码，textID为输出日期的框，left和top定位
    var html="<div style='position:absolute; width:191px;height:182px;left:"+left+"px; top:"+top+"px; background-color:#fff;'>";
    //主div的创建以及定位
    var i;
    var weekDay =new Array("日","一","二","三","四","五","六");
    html +="<input id='cal_year' type='text' style='visibility:hidden;'><input id='cal_month' type='text' style='visibility:hidden;'><input id='cal_day' type='text' style='visibility:hidden;'>";
    //三个隐藏的input框用来存储显示的目前主显示日期列表的年月日以备切换上下一个月份或年份取值，刷新日期列表，以及点击后的取值
    html += "<div style='position:absolute;width:189px;height:180px; left:0px;top:0px; border:solid 1px #99f;'>";
    //副div，建立分布区域，可去掉
    html+="<div id='cal_date' style='position:absolute;width:189px;height:20px; left:0px;top:0px;background-color:#99f; text-align:center;font-size:16px;line-height:20px;'></div>";
    //年月显示区
    html+="<div style='position:absolute;width:189px;height:20px; left:0px;top:20px;'>";//week显示区
    for(i=0;i<7;i++)
        html+="<div style='position:absolute;width:20px;height:20px; left:" + 27*i + "px;top:0px; color:"+((i==0||i==6)?"Red":"#39f")+";text-align:center;'>" + weekDay[i] + "</div>";
    html+="</div>";
    html+="<div id='cal_content' style='position:absolute;width:189px;height:120px; left:0px;top:40px;'></div>";
    //日期列表主显示区
    html+="<div style='position:absolute;width:189px;height:20px; left:0px;top:160px;background-color:#99f; text-align:center;font-size:16px;line-height:20px;'onclick='document.getElementById(\""+divID+"\").style.visibility=\"hidden\";'><a href='#'style='outline:none;text-decoration:none;color:#ddd; font-size:16px;'>关&nbsp;&nbsp;&nbsp;&nbsp;闭</a></div>";
    //关闭区，防止在没有点击日期时无法隐藏
    html+="</div>";
    html +="</div>";
    document.getElementById(divID).innerHTML=html;
   
    var date=new Date();
    BuildCal(date.getFullYear(),date.getMonth(),date.getDate(),textID,divID);
    //初始化日期列表主显示区
}

function BuildCal(year,month,day,textID,divID){//按日期刷新日期列表主显示区
   var monMax = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
   var i,j,k=1;
   var temp,isFirst=1,temp2=1;
   var dt=new Date();
   var today = new Date();
   var html="";
   document.getElementById("cal_year").value=year;
   document.getElementById("cal_month").value=month;
   document.getElementById("cal_day").value=day;
   //存储日期
   dt.setFullYear(year);
   dt.setMonth(month);
   dt.setDate(1);
   temp = dt.getDay();
   //获取当月第一天为周几
   if(year%4==0 && year%400!=0)
        monMax[2]=29;
   for(i=0;i<6;i++)
        for(j=0;j<7;j++){
            if(k<=monMax[month]){
                if(isFirst){//分布当月第一天以及上个月
                    if(j==temp){
                         html+="<div style='position:absolute;width:20px;height:20px; left:" + (j*27) +"px; top:" + 20*i
                             + "px;"+((year==today.getFullYear()&&month==today.getMonth()&&k==today.getDate())?"background-color:#ddf;":"")
                             +"text-align:center; line-height:20px;'onmouseover='javascript:this.style.border=\"solid 1px #666\";'"
                             +" onmouseout='javascript:this.style.border=\"\";'"
                             +" onclick='document.getElementById(\""+textID+"\").value=\""+year+"-"+(month+1)+"-"+k+"\";document.getElementById(\""+divID+"\").style.visibility=\"hidden\";'><a href='#'style='outline:none;text-decoration:none;color:"+((j==0||j==6)?"Red":"#39f")+";font-size:14px;'>" + k +"</a></div>";
                         isFirst=0;
                         k++;
                    }
                    else{
                        html+="<div style='position:absolute;width:20px;height:20px; left:" + (j*27) +"px; top:" + 20*i
                             + "px;"
                             +"text-align:center;line-height:20px;'onmouseover='javascript:this.style.border=\"solid 1px #666\";'"
                             +" onmouseout='javascript:this.style.border=\"\";'"
                             +" onclick='document.getElementById(\""+textID+"\").value=\""+year+"-"+(month)+"-"+(monMax[month-1]-temp+j+1)+"\";document.getElementById(\""+divID+"\").style.visibility=\"hidden\";'><a href='#'style='outline:none;text-decoration:none;color:#999;font-size:14px;'>" + (monMax[month-1]-temp+j+1) +"</a></div>";
                        
                    }   
                }
                else//分布本月
                {
                    html +="<div style='position:absolute;width:20px;height:20px; left:" + (j*27) +"px; top:" + 20*i
                        + "px;"+((year==today.getFullYear()&&month==today.getMonth()&&k==today.getDate())?"background-color:#ddf;":"")
                        +" text-align:center;line-height:20px;'onmouseover='javascript:this.style.border=\"solid 1px #666\";'"
                        +" onmouseout='javascript:this.style.border=\"\";'"
                        +" onclick='document.getElementById(\""+textID+"\").value=\""+year+"-"+(month+1)+"-"+k+"\";document.getElementById(\""+divID+"\").style.visibility=\"hidden\";'><a href='#'style='outline:none;text-decoration:none;color:"+((j==0||j==6)?"Red":"#39f")+";font-size:14px;'>" + k +"</a></div>";
                    k++;
                }
            }
            else{//剩余区域分布下个月填充至满
                 html+="<div style='position:absolute;width:20px;height:20px; left:" + (j*27) +"px; top:" + 20*i
                             + "px;"
                             +"text-align:center;line-height:20px;'onmouseover='javascript:this.style.border=\"solid 1px #666\";'"
                             +" onmouseout='javascript:this.style.border=\"\";'"
                             +" onclick='document.getElementById(\""+textID+"\").value=\""+year+"-"+(month+2)+"-"+temp2+"\";document.getElementById(\""+divID+"\").style.visibility=\"hidden\";'><a href='#'style='outline:none;text-decoration:none;color:#999;font-size:14px;'>" + temp2 +"</a></div>";
                             temp2++;
            }
        }
   document.getElementById("cal_date").innerHTML = "<a href='#'style='outline:none;text-decoration:none;color:#ddd; font-size:12px;' onclick='DisplayChange(-1,0,\""+textID+"\",\""+divID+"\");'> << </a>&nbsp;"+"<a href='#' style='outline:none;text-decoration:none;color:#ddd; font-size:12px;' onclick='DisplayChange(0,-1,\""+textID+"\",\""+divID+"\");'> < </a>&nbsp;&nbsp;&nbsp;&nbsp;"+document.getElementById("cal_year").value+"年"+(parseInt(document.getElementById("cal_month").value)+1)+"月&nbsp;&nbsp;&nbsp;&nbsp;<a href='#' style='outline:none;text-decoration:none;color:#ddd; font-size:12px;'onclick='DisplayChange(0,1,\""+textID+"\",\""+divID+"\");'> > </a>&nbsp;<a href='#' style='outline:none;text-decoration:none;color:#ddd; font-size:12px;'onclick='DisplayChange(1,0,\""+textID+"\",\""+divID+"\");'> >> </a>";         
   document.getElementById("cal_content").innerHTML = html;
}

function DisplayChange(yearChange,monthChange,textID,divID){//上下个月或年，上为负，下为正
    yearChange = parseInt(yearChange);
    monthChange = parseInt(monthChange);
    if(yearChange){
        document.getElementById("cal_year").value=parseInt(document.getElementById("cal_year").value)+yearChange;//取值并转化为数字
    }
    if(monthChange){
        var month=parseInt(document.getElementById("cal_month").value)+monthChange;
        if(month>11){//日期中一月为0,12月为11
            document.getElementById("cal_year").value=parseInt(document.getElementById("cal_year").value)+1;
            document.getElementById("cal_month").value =0;
        }
        else if(month<0){
            document.getElementById("cal_year").value=parseInt(document.getElementById("cal_year").value)-1;
            document.getElementById("cal_month").value =11;
        }
        else
        document.getElementById("cal_month").value=month;
    }
    BuildCal(parseInt(document.getElementById("cal_year").value),parseInt(document.getElementById("cal_month").value),parseInt(document.getElementById("cal_day").value),textID,divID);
   //刷新日期列表主显示区
}


代码如上，主要是为了在做数据库当中关于日期信息的查找而制作的
做完这个日历的时候，我只想说一句话：网页最难的不过是一个小小的引号

效果如图

修正一个bug，在跨年份显示上个月和下个月显示NAN（非数）
修改如下
if(isFirst){//分布当月第一天以及上个月
                    if(j==temp){
                         html+="<div style='position:absolute;width:20px;height:20px; left:" + (j*27) +"px; top:" + 20*i
                             + "px;"+((year==today.getFullYear()&&month==today.getMonth()&&k==today.getDate())?"background-color:#ddf;":"")
                             +"text-align:center; line-height:20px;'onmouseover='javascript:this.style.border=\"solid 1px #666\";'"
                             +" onmouseout='javascript:this.style.border=\"\";'"
                             +" onclick='document.getElementById(\""+textID+"\").value=\""+year+"-"+(month+1)+"-"+k+"\";document.getElementById(\""+divID+"\").style.visibility=\"hidden\";'><a href='#'style='outline:none;text-decoration:none;color:"+((j==0||j==6)?"Red":"#39f")+";font-size:14px;'>" + k +"</a></div>";
                         isFirst=0;
                         k++;
                    }
                    else{
                        html+="<div style='position:absolute;width:20px;height:20px; left:" + (j*27) +"px; top:" + 20*i
                             + "px;"
                             +"text-align:center;line-height:20px;'onmouseover='javascript:this.style.border=\"solid 1px #666\";'"
                             +" onmouseout='javascript:this.style.border=\"\";'"
                             +" onclick='document.getElementById(\""+textID+"\").value=\""+year+"-"+(month)+"-"+(monMax[month-1]-temp+j+1)+"\";document.getElementById(\""+divID+"\").style.visibility=\"hidden\";'><a href='#'style='outline:none;text-decoration:none;color:#999;font-size:14px;'>" + (monMax[month-1]-temp+j+1) +"</a></div>";
最后一个onclick中.value后面改成(month==0?(year-1):year)+"-"+(month==0?12:month)+"-"+(monMax[(month==0?11:(month-1))]-temp+j+1)
div显示内容(monMax[(month==0?11:(month-1))]-temp+j+1)

else{//剩余区域分布下个月填充至满
                 html+="<div style='position:absolute;width:20px;height:20px; left:" + (j*27) +"px; top:" + 20*i
                             + "px;"
                             +"text-align:center;line-height:20px;'onmouseover='javascript:this.style.border=\"solid 1px #666\";'"
                             +" onmouseout='javascript:this.style.border=\"\";'"
                             +" onclick='document.getElementById(\""+textID+"\").value=\""+year+"-"+(month+2)+"-"+temp2+"\";document.getElementById(\""+divID+"\").style.visibility=\"hidden\";'><a href='#'style='outline:none;text-decoration:none;color:#999;font-size:14px;'>" + temp2 +"</a></div>";
year改成(month==11?(year+1):year)
month+2改成month==11?1:(month+2)


[ 本帖最后由 awl805 于 2012-11-24 14:08 编辑 ]

我表示，5个太阳什么的都是坑人的，只要是版主都上5个太阳了