JavaScript日历控件(对象模型)

由于工作需要,需要在客户端复制一个日期控件,问题出来了.服务器的日期控件复制之后是不能用的.因为复制之后服务器没有注册.(按道理,应该是能用的,因为JS毕竟是引用过来了.至于为什么不能用,有懂的请不吝赐教,谢谢).  于是自己写了一个,按照习惯的对象模式建立.

代码如下

 

Title

<script type="text/javascript">
  function createTitleTableObj()
  {
    var tabFrameObj =document.createElement("Table");
 var cr = tabFrameObj.insertRow(0);
 for(var i= 0;i<6;i++) cr.insertCell(0);
 cr.cells[5].className="dateTitleToolCell";//头部单元格的样式
 cr.cells[5].title="下年";
 cr.cells[5].innerHTML="8";
 cr.cells[5].onclick=function(){yearChanged(this.parentNode.parentNode.parentNode.parentNode.parentNode,1)}
 cr.cells[5].onmouseover=function(){this.style.color="green"}
    cr.cells[5].onmouseout=function(){this.style.color=""}
 
 
 cr.cells[4].className="dateTitleToolCell";//头部单元格的样式
 cr.cells[4].innerHTML="4";
 cr.cells[4].title="下月";
 cr.cells[4].onclick=function(){monthChanged(this.parentNode.parentNode.parentNode.parentNode.parentNode,1)}
 cr.cells[4].onmouseover=function(){this.style.color="green"}
    cr.cells[4].onmouseout=function(){this.style.color=""}
 
 cr.cells[3].onclick=function(){createmonth(parseInt(cr.cells[3]).innertText,this)}
 cr.cells[3].onmouseover=function(){this.style.color="red";} 
    cr.cells[3].onmouseout=function(){this.style.color="";}
 
 cr.cells[0].className="dateTitleToolCell";//头部单元格的样式
 cr.cells[0].innerHTML="7";
 cr.cells[0].title="前年";
 cr.cells[0].onclick=function(){yearChanged(this.parentNode.parentNode.parentNode.parentNode.parentNode,-1)}
 cr.cells[0].onmouseover=function(){this.style.color="green"}
    cr.cells[0].onmouseout=function(){this.style.color=""}
 
    cr.cells[1].className="dateTitleToolCell";//头部单元格的样式
 cr.cells[1].innerHTML="3";
 cr.cells[1].title="前月";
 cr.cells[1].onclick=function(){monthChanged(this.parentNode.parentNode.parentNode.parentNode.parentNode,-1)}
 cr.cells[1].onmouseover=function(){this.style.color="green"}
    cr.cells[1].onmouseout=function(){this.style.color=""}
 tabFrameObj.className="datetit";
 return tabFrameObj; 
  }
  function yearChanged(titleDivobjs,value)
  {
     titleDivobjs.loadDate(titleDivobjs.Year+value,titleDivobjs.Month);
  }
  function monthChanged(titleDivobjs,value)
  {
  titleDivobjs.Month+=value;
  if(titleDivobjs.Month+value==0 ){titleDivobjs.Month=12;titleDivobjs.Year-=1;}
  if(titleDivobjs.Month+value==13 ){titleDivobjs.Month=1;titleDivobjs.Year+=1;}
  titleDivobjs.loadDate(titleDivobjs.Year,titleDivobjs.Month);
  }
 
  function createWeekTableObj()
  {
      var week = new Array('日','一','二','三','四','五','六');
   var tabFrameObj =document.createElement("Table");
   tabFrameObj.className="dateweek";
    var cr = tabFrameObj.insertRow(0);
    for(var i=0;i<7;i++)
    {
      cc =cr.insertCell(cr.cells.length);
   cc.innerHTML=week[i];
    }
    return tabFrameObj;
  }
 
  function createDateTableObj()
 {
    var tabFrameobj = document.createElement("Table");
 tabFrameobj.cellspacing=2;
 tabFrameobj.cellpadding=0;
 //var tabBody =document.createElement("")
 for(var i =0;i<6;i++)
 {
  var cr=tabFrameobj.insertRow(0);
  for(var j=0;j<7;j++)
  {
  cc=cr.insertCell(0)
  cc.innerHTML="1";
  cc.className ="datecell";
  }
 }
  tabFrameobj.className="dateds";
 return tabFrameobj;
 }
 
 function createDiv()
 {
 var rdiv = document.createElement("div");
 if(arguments.length>0)rdiv.className=arguments[0];
 return rdiv;
 }
 function initDate()
 {
   var willLoadDate;
   var cday;
   var month;
      var year;
  
  if(arguments.length==0){willLoadDate =new Date();this.Day=willLoadDate.getDate();}
  if(arguments.length==1)
  {
   var datestr=(arguments[0].indexOf(":")==-1)?arguments[0].split("-"):arguments[0].split(" ")[0].split("-");
      var  mYear=parseInt(datestr[0]);
   var  mMonth=parseInt(datestr[1]);
   var mDay=parseInt(datestr[2]); 
   willLoadDate=new Date(mYear,mMonth-1,mDay); 
   this.Day=willLoadDate.getDate();
  }
  if(arguments.length>=2)
    {
      var  mYear=parseInt(arguments[0]);
   var  mMonth=parseInt(arguments[1]);
   var mDay;
   if(arguments.length>2){mDay=parseInt(arguments[2]);this.Day=mDay}else{mDay=1;}
   willLoadDate=new Date(mYear,mMonth-1,mDay);       
    }  
      var length = new Array(31,30,31,30,31,30,31,31,30,31,30,31);
   length[1] = ((year%4==0)&&(year%100!=0)||(year%400==0))?29:28;
   month =willLoadDate.getMonth();
   year=(willLoadDate.getYear()<100)?1900+willLoadDate.getYear():willLoadDate.getYear();
   cday=willLoadDate.getDate();
  
   this.titleBar.cells[2].innerHTML=year+"年";
   this.Year=year;
   this.Month=month+1;
   this.titleBar.cells[3].innerHTML=month+1+"月";
   this.shadowdiv.innerHTML="<br/>"+year;
   var mydate =new Date(year,month,1);
   var titleDivobj =this;
   day=mydate.getDay();
   for(i=0;i<this.dateBar.cells.length;i++){this.dateBar.cells[i].innerHTML = "";this.dateBar.cells[i].style.backgroundColor="";
   //清空单元格原有的事件处理
     this.dateBar.cells[i].onclick="";
     this.dateBar.cells[i].onmouseover="";
     this.dateBar.cells[i].onmouseout="";}
   for(i=0;i<length[month];i++)
  {
   this.dateBar.cells[i+day].innerHTML = (i+1);
   this.dateBar.cells[i+day].onmouseover=function(){mOver(this)};
    this.dateBar.cells[i+day].onmouseout=function(){mOut(this)}  
      this.dateBar.cells[i+day].onclick=function(){dateItemClick(titleDivobj,this)};
   if(i+1==this.Day)this.dateBar.cells[i+day].style.backgroundColor="blue";
   if(new Date(year,month,i+1).getDay()==6||new Date(year,month,i+1).getDay()==0){this.dateBar.cells[i+day].style.color='red';}
  }  
 }
 function dataControl()
 {
 window.style=".dateweek{background-color:#DfDfff;font-size:12px;width:140px;}"
/* 日前表格样式*/
 window.style+=".dateds{width:140px;font-size:12px;cursor:hand}"
/* 日期单元格默认样式*/
 window.style+=".datecell{height:10px; text-align:center}"
/* 日期单元格移动样式*/
window.style+=".mover{ height:10px; text-align:center; border:dashed;background-color:#B5FDE2; border:#666666}"
window.style+=".move1{border:1px solid #5d5d5d;background-color:#f4f4f4;color:#909eff;font-size:12px}"
/* 日期头表按钮格样式*/
window.style+=".datetit{background-color:#909EFF;width:140px;font-size:12px;color:white;cursor:default; width:100%}"
/* 日期控件容器Div样式*/
window.style+=".datecs{border:1px solid #909eff;width:142px;z-index:9999; vertical-align:bottom; position:absolute}"
/*日期头表按钮格样式*/
window.style+=".dateTitleToolCell{ font-family: Webdings;cursor:hand;}"
/*水印div样式*/
window.style+=".dateshadow{position:absolute; font-family:Arial Black;font-size:50px;color:#d4d4d4;z-index:1;text-align:center; vertical-align:bottom;top:0px;left:0px}"
/*装载日期表格的div样式*/
window.style+=".datebodyDiv{position:relative;z-index:1 ; }"
 document.createStyleSheet("javascript:window.style")
 
  var titldDiv =createDiv("datecs");
 titldDiv.Year="";
 titldDiv.Month="";
 titldDiv.Day="";
 titldDiv.targetControl=null;
 var bodyDiv =createDiv("datebodyDiv");
    var shadowdiv =createDiv("dateshadow");  
 var _titleBar=createTitleTableObj(); 
 var _weekBar=createWeekTableObj();
 var _dateBar=createDateTableObj();
 bodyDiv.appendChild(_titleBar);
 bodyDiv.appendChild(_weekBar);
 bodyDiv.appendChild(_dateBar);
 titldDiv.appendChild(shadowdiv);
 titldDiv.appendChild(bodyDiv); 
 titldDiv.shadowdiv=shadowdiv;
 titldDiv.titleBar=_titleBar;
 titldDiv.weekBar=_weekBar;
 titldDiv.dateBar=_dateBar;
 titldDiv.loadDate =initDate;
 titldDiv.show=datedivShow;
 titldDiv.onmousedown=datedivObjDown;
 titldDiv.onmousemove= datedivObjMove;
 if(arguments.length==0){titldDiv.loadDate();}
 else
 { titldDiv.targetControl=arguments[0];
   if(arguments[0].value.match(/^\d{4,4}\-\d{1,2}\-\d{1,2}$/))
    {titldDiv.loadDate(arguments[0].value);}
    else{titldDiv.loadDate();}
 }
 titldDiv.onselectstart=function(){return false;}
 return titldDiv;
 }
 function datedivShow()
 {
    if(this.targetControl!=null)
 {
    this.style.top =this.targetControl.getBoundingClientRect().bottom;
    this.style.left =this.targetControl.getBoundingClientRect().left;
    document.body.appendChild(this);
 }
 else
 {
    this.style.top = document.body.clientHeight/3;
    this.style.left =document.body.clientWidth/3;
    document.body.appendChild(this);
 }
 }
//控件显示处理
 function datedivObjDown()
 {
    this.mouseSX =event.x;
 this.mouseSY= event.y;
 }
 function datedivObjMove()
 {
   if(event.button==1)
   {
  this.style.pixelLeft+=event.x-this.mouseSX+this.clientLeft;
     this.style.pixelTop+=event.y-this.mouseSY+ this.clientTop;
   }
 }
//结果写入处理
function dateItemClick(divobj,cellobj)
{
divobj.Day=cellobj.innerText;
divobj.loadDate(divobj.Year,divobj.Month,divobj.Day);
try{
divobj.targetControl.innerText=divobj.Year+"-"+divobj.Month+"-"+ divobj.Day;divobj.style.display="none";
}
catch(e)
{}
}
//日期单元格鼠标事件处理
function mOver(obj){obj.className = 'mover';}
function mOut(obj){if(obj.className=='mover')obj.className = 'datecell';}
  </script>

  <script>
var ndiv =new dataControl(obj)//建立一空间对象

   function test(obj)
 {
  ndiv.targetControl =obj //使控件对象绑定到目标控件上.
   ndiv.show();//显示控件,可根据obj的值进行初始化.
 }
   </script>
</head><body>
<form>
<div style="position:absolute; border:1px #99FF33 solid; width: 296px; height: 400px; text-align:center; vertical-align:middle">
  <input name="button" type="button"  style=" width:50; height:50;  border:#CCCC33; border:solid; padding:5px" onClick="test(this);" value="1903-28">
</div>
</form>
</body></html>

 

来源：https://www.cnblogs.com/lvfan10/archive/2007/09/16/894763.html