日历控件使用问题，急需解决

以前写的个
<style type="text/css">
.div{ border:1px solid #7B9EBD; width:210px; height:auto;}
.divtitle{ background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081206/221534971.p.gif); height:22px; width:210px;line-height:22px; vertical-align:middle;}
.divbor{width:20px; height:22px; float:left;text-align:center; cursor: pointer}
.divcen{width:130px; float:left;text-align:center; font-size:12px}
.tab{ width:210px; font-size:12px;}
.tdtitle{ width:30px; text-align:center; vertical-align:middle; background-color:#EBF5FF; height:22px;}
.td{width:30px; text-align:center; vertical-align:middle; height:22px; cursor:pointer}
.wai{height:20px; width:100px !important;width:103px; border:1px solid #7B9CBD;}
</style>
<body><div class="wai"><input id="in" type="text" style=" border:0px;height:18px; margin-top:1px; float:left; width:80px">
<div style="height:20px; width:15px;float:left;"><img onClick="sss(this)" src="http://album.hi.csdn.net/app_uploads/wtcsy/20081206/223656892.p.gif" style=" margin-top:2px"></div> </div>
<div id="ss" style="display:none; position:absolute"></div></body>
<script>
function sss(img){
var obj = document.getElementById("ss")
var left=img.offsetLeft
var top=img.offsetTop
var height=img.offsetHeight
while (img=img.offsetParent) {
left += img.offsetLeft;
top += img.offsetTop;
}
obj.style.display=""
obj.style.left=left
obj.style.top=top+height
}
function Calendar(id,inid){
      this.inid = inid
      var today =new Date()
      this.id=id                                                   //父元id
      this.monthdays=[31,28,31,30,31,30,31,31,30,31,30,31]         //
      this.month = today.getMonth()                                //今天是几月
      this.year  = today.getFullYear()
      this.day   = today.getDate()
      var first=new Date(this.year,this.month,1)
      this.firstday = first.getDay()
      this.format = new Array()                                   //本月的第一天是星期几
      this.important=this.year+""+this.month+""+this.day               //关键日子要变色  也可以把它设置成数组多放几个关键的日子进去。。
      this.tab =""                                                 //记录那个tab元素  因为没有id 这样方便直接用
      this.show=""                                                 //显示年月的那个div
}Calendar.prototype.Framework=function(){
   var week =["日","一","二","三","四","五","六"]
   var self =this
       self.dayarray()
   var div = document.createElement("div")
       div.className="div"
       document.getElementById(this.id).appendChild(div)
   var divtitle = document.createElement("div")
       divtitle.className="divtitle"
       div.appendChild(divtitle)
   var divl = document.createElement("div")
       divl.className="divbor"
       divl.innerHTML="←"
       divl.onclick=function(){self.preyear()}
       divtitle.appendChild(divl)
   var divll = document.createElement("div")
       divll.className="divbor"
       divll.innerHTML="<"
       divll.onclick=function(){self.premonth()}
       divtitle.appendChild(divll)
   var divc = document.createElement("div")
       divc.className="divcen"
       divc.innerHTML=this.year+"年"+(this.month+1)+"月"
       this.showdiv = divc
       divtitle.appendChild(divc)
   var divr = document.createElement("div")
       divr.className="divbor"
       divr.innerHTML=">"
       divr.onclick=function(){self.getnext()}
       divtitle.appendChild(divr)
   var divrr = document.createElement("div")
       divrr.className="divbor"
       divrr.innerHTML="→"
       divrr.onclick=function(){self.nextyear()}
       divtitle.appendChild(divrr)
   var tab   = document.createElement("table")
       self.tab=tab
       tab.className="tab"
    tab.border=0; tab.cellSpacing=0; tab.cellPadding=0
   var tbody = document.createElement("tbody")
   var tr    = document.createElement("tr")
         for(var i=0;i<week.length;i++)                 //输出表头
          {
             var td  = document.createElement("td")
             td.innerHTML=week[i]
             td.className="tdtitle"
             tr.appendChild(td)
          }
      tbody.appendChild(tr)
         for(var i=0;i<6;i++)                  //只是创建表格   病未填充数据
          {
            var tr = document.createElement("tr")
            for(j=0;j<7;j++)
               {
                 var td = document.createElement("td")
                     td.className="td"
                     if(j==0)
                     {td.style.backgroundColor="#D8ECFF"}   //第一行列变色  应为是星期天  要休息
                     td.color=td.style.backgroundColor    //td是没有这个属性的但是可以这么写  具体叫什么用法忘记了
                     td.onmousemove=function(){this.style.backgroundColor="#FFFFCC"};
                     (function(td){td.onmouseout =function(){if(self.year+""+self.month+""+this.innerHTML!=self.important){this.style.backgroundColor=this.color;}else{this.style.backgroundColor="#A8BFE4"}}})(td)
                     td.onclick = function(){if(this.innerHTML==""){return;}document.getElementById(self.inid).value=self.year+"-"+(self.month+1)+"-"+(this.innerHTML);document.getElementById(self.id).style.display="none"}
                     tr.appendChild(td)
               }
            tbody.appendChild(tr)
          }
       tab.appendChild(tbody)
       div.appendChild(tab)
       self.Isyear()
       self.update()
}Calendar.prototype.dayarray=function(){      //生成一个数组  用来放表里面应该装的内容
      for(i=0;i<42;i++)
       {
         if(this.firstday>i||(i+1-this.firstday)>this.monthdays[this.month])
         {this.format.push("")}
         else
         {this.format.push(i+1-this.firstday)}
       }
}Calendar.prototype.premonth =function(){
if(this.month!=0)
{this.month=this.month-1}
else
{this.month=11;this.year=this.year-1}
var first=new Date(this.year,this.month,1)
this.firstday = first.getDay()
this.format.splice(0,this.format.length)
this.dayarray()
this.update()
}Calendar.prototype.preyear =function(){
this.year=this.year-1
var first=new Date(this.year,this.month,1)
this.firstday = first.getDay()
this.format.splice(0,this.format.length)
this.dayarray()
this.update()
}Calendar.prototype.nextyear =function(){
this.year=this.year+1
var first=new Date(this.year,this.month,1)
this.firstday = first.getDay()
this.format.splice(0,this.format.length)
this.dayarray()
this.update()
}Calendar.prototype.getnext =function(){
if(this.month!=11)             //下一个月
{this.month=this.month+1}
else
{this.month=0;this.year=this.year+1}
var first=new Date(this.year,this.month,1)
this.firstday = first.getDay()
this.format.splice(0,this.format.length)
this.dayarray()
this.Isyear()
this.update()
}Calendar.prototype.update = function(){for(var i=0;i<6;i++)
{
   for(j=0;j<7;j++)
    {
     if(this.year+""+this.month+""+this.day!=this.important)
       {this.tab.getElementsByTagName("tr")[i+1].getElementsByTagName("td")[j].style.backgroundColor=""}
     if(j==0)
       {this.tab.getElementsByTagName("tr")[i+1].getElementsByTagName("td")[j].style.backgroundColor="#D8ECFF"}
     if(this.important==this.year+""+this.month+""+this.format[i*7+j])
       {this.tab.getElementsByTagName("tr")[i+1].getElementsByTagName("td")[j].style.backgroundColor="#A8BFE4"}
     this.tab.getElementsByTagName("tr")[i+1].getElementsByTagName("td")[j].innerHTML=this.format[i*7+j]
     this.showdiv.innerHTML=this.year+"年"+(this.month+1)+"月"
    }
}
}Calendar.prototype.Isyear=function(){
if (0==this.year%4&&((this.year%100!=0)||(this.year%400==0)))
{this.monthdays[1]=29}
else
{this.monthdays[1]=28}
}
var  oo = new Calendar("ss","in")
oo.Framework()
</script>

你看看我这个你用得着不,用得着就来下载哈.http://www.itgoto.com.cn/sablog-x/?action=show&id=104

我的意思是，现在我想用用图片形式打开日历控件，选择后的日期填写到空格中，但是我下载的calendar.js，只支持单击input就显示日历控件，不支持图片形式打开日历控件，我想采用图片形式打开日历控件，不知道这样说各位高手明白了吗，请帮帮忙，我急需，这个日历控件符合我截面风格

楼主上传的代码单击input也不会显示日历呀。

http://blog.csdn.net/superwfei/archive/2008/12/15/3523330.aspx一个简单的小日历

<%@LANGUAGE="JAVASCRIPT" CODEPAGE="936"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script language=javascript src="calendar.js"></script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head><body>
<table width="100%" border="1" cellspacing="0" cellpadding="1" bordercolordark="#FFFFFF" bordercolor="#000000">
<td><div align="center">检定日期：</div>    </td>
      <td width="75%" bgcolor="#efefef">
        <input name="jdrq" type="text"  value="<%=Date()%>" onFocus="calendar()" size="20" maxlength="20" />

         <img name="popcal" align="absmiddle" src="calbtn.gif" width="34" height="22" border="0" onClick="calendar()" title="请选择检定日期"></td>
  </tr>
</table >
</body>
</html>

调试易

日历控件使用问题，急需解决

解决方案 »