现在的位置: 首页 > 综合 > 正文

JS 日期控件

2013年08月13日 ⁄ 综合 ⁄ 共 16481字 ⁄ 字号 小 中 大 ⁄ 评论关闭

http://download1.csdn.net/down3/20070528/28173432642.rar

==
calendar.html
-------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//EN" "http://www.w3.org/tr /xhtml1/DTD/xhtml1-tr ansitional.dtd" >
<HTML xmlns="http://www.w3.org/1999/xhtml">
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus" />
  <meta http-equiv="expires" content="no-cache" />
  <style type="text/css">
      body,td{font-size:9pt; margin:1px; font-family:georgia; font-weight:bold;}
   .title{font-weight:bold; color:green;}
   a{color:blue; text-decoration:none;}
   a:hover{color:red; font-size:12pt;}
   a.linkHead{color:#2960B1; text-decoration:none; font-size:9pt;}
   a.linkHead:hover{color:red; font-weight:normal; font-size:9pt;}
   #calBg{position:absolute; top:2px; left:0px; z-index:-1; font-size:33px; font-family:varanda; font-weight:bold; filter:alpha(opacity=30) glow(color=#FCEFDC,strength=7); color:orange; background-color:#EEEEEE; width:204px; height:154px; vertical-align:middle; padding-top:80px; padding-left:10px;}
   table,td{background:none};
   #calendarTab{border:1px solid #EEEEEE; margin:1px;}
   .tb{border-bottom:1px solid #EEEEEE;}
   .trb{border-bottom:1px solid #EEEEEE; border-right:1px solid #EEEEEE;}
   .tr{border-right:1px solid #EEEEEE;}
   .titleHead{background-color:#BCD2EE; font-weight:normal;}
   a#close{color:#2960B1; font-size:13px; font-weight:bold;}
   a#close:hover{color:red; font-size:13px; font-weight:bold;}
   </style>
  <script language="javascript" type="text/javascript" src="calendar.js"></script>
  <script language="javascript" type="text/javascript" src="calendar_done.js"></script>
 </HEAD>

 <BODY onload="init();" onContextMenu="return false" onselectstart="return false">
   <table border="0" cellpadding="0" cellspacing="1" id="calendarTab" name="calendarTab" bgcolor="#EEEEEE">
     <tr>
      <td  height="30" colspan="7" align="center" valign="middle" class="tb titleHead">
   <span style="font-family:webdings; font-size:15px;"><a href="javascript:moveYear(-1)" class="linkHead">7</a><a href="javascript:moveMonth(-1)" class="linkHead">3</a></span>
      <select id="year" name="year" onchange="_getDate()">
      </select>
      &nbsp;
      <select id="month" name="month" onchange="_getDate()">
          <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
       <option value="4">4</option>
       <option value="5">5</option>
       <option value="6">6</option>
       <option value="7">7</option>
       <option value="8">8</option>
       <option value="9">9</option>
       <option value="10">10</option>
       <option value="11">11</option>
       <option value="12">12</option>
      </select>
       <span style="font-family:webdings; font-size:15px;"><a href="javascript:moveMonth(1)" class="linkHead">4</a><a href="javascript:moveYear(1)" class="linkHead">8</a></span>    </td>
  </tr>
     <tr bgcolor="#FFFFFF" >
      <td width="30px" height="25px" align="center" class="title trb"><font color="red">日</font></td>
   <td width="30px" height="25px" align="center" class="title trb">一</td>
   <td width="30px" height="25px" align="center" class="title trb">二</td>
   <td width="30px" height="25px" align="center" class="title trb">三</td>
   <td width="30px" height="25px" align="center" class="title trb">四</td>
   <td width="30px" height="25px" align="center" class="title trb">五</td>
   <td width="30px" height="25px" align="center" class="title tb"><font color="red">六</font></td>
  </tr>
  <tr bgcolor="#FFFFFF" >
      <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="tb">&nbsp;</td>
  </tr>
  <tr bgcolor="#FFFFFF" >
      <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="tb">&nbsp;</td>
  </tr>
  <tr bgcolor="#FFFFFF" >
      <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="tb">&nbsp;</td>
  </tr>
  <tr bgcolor="#FFFFFF" >
      <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="tb">&nbsp;</td>
  </tr>
  <tr bgcolor="#FFFFFF" >
      <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="tb">&nbsp;</td>
  </tr>
  <tr bgcolor="#FFFFFF" >
      <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="trb">&nbsp;</td>
   <td width="30px" height="25px" align="center" class="tb">&nbsp;</td>
  </tr>
  <tr bgcolor="#FFFFFF">
      <td height="25px"  align="center" colspan="7" class="titleHead">
       <a href="javascript:void(0)" id="close" onclick="parent.document.getElementById('caDiv').style.display='none';"><span style="font-family:webdings; font-size:16px">r</span>&nbsp;关闭</a></td>
  </tr>
 </table>
 <div id="calBg" ></div>
 </BODY>
</HTML>
==========
calendar.js
------------------
     /*----------------------------------------*/
  |                                          |
  |  author:hanpoyangtitan                   |
  |  create:2007-5-25                        |
  |                                          |
  /*----------------------------------------*/
  function CalendarPicker(beginYear,endYear)
   {
       this.tab=null;    //表格对象
    this.curYYYY=0;    //年
    this.curMM=0;
    this.curDD=0;
    this.curWeekDay=0;
    this._selYYYY=null;
    this.container_=null;
    this.beginYear=beginYear;;
    this.endYear=endYear;
   }
     
   CalendarPicker.prototype.loadTab=function()
   {
       this.tab=document.getElementById("calendarTab");
   }

   CalendarPicker.prototype.loadDate=function(YYYY,MM)
   {
       this.clearTab();
       var now=new Date();
    var newDate=null;
    if(YYYY==null || YYYY==0 || YYYY=="")
    {
        this.curYYYY=now.getYear();
    }
    else
    {
        this.curYYYY=YYYY;
    }

    if(MM==null || MM<0)
    { 
        this.curMM=now.getMonth();
    }
    else
    {
        this.curMM=MM;
    }
    var daysNumber=this.getMonthDays(this.curYYYY,this.curMM+1);
    var firstDay=new Date(this.curYYYY,this.curMM,1);
    var firstWeekDay=firstDay.getDay();
    var lastDay=new Date(this.curYYYY,this.curMM,daysNumber);
    var lastWeekDay=lastDay.getDay();
    var dd=0;
    for(var i=0;i<this._selYYYY.options.length;i++)
    {
        if(this._selYYYY.options[i].value==this.curYYYY)this._selYYYY.selectedIndex=i;
    }

    for(var i=0;i<this._selMM.options.length;i++)
    {
        if(this._selMM.options[i].value==this.curMM+1)this._selMM.selectedIndex=i;
    }

    for(var r=2;r<8;r++)
    {
        if(r==2)
     {  
         for(L=1;L<=7-firstWeekDay;L++)
      {  
          dd++;
          var newDate=new Date(this.curYYYY,this.curMM,dd);
       var newWeekDay=newDate.getDay();
       var newDay=newDate.getDate();
       if(now.getYear()==newDate.getYear() && now.getMonth==newDate.getMonth() && now.getDate()==newDate.getDate())
              this.setValue(r,newWeekDay,dd,"orange","#ABABAB");
       else if(newDate.getDay()==6 || newDate.getDay()==0)
        this.setValue(r,newWeekDay,dd,"red","#FFFFFF");
       else
           this.setValue(r,newWeekDay,dd,"","#FFFFFF");
      }
     }
     else
     {
         for(L=0;L<7;L++)
      {
          dd++;
       if(dd>daysNumber)return;
          var newDate=new Date(this.curYYYY,this.curMM,dd);
       var newWeekDay=newDate.getDay();
       var newDay=newDate.getDate();
     
          if(now.getYear()==newDate.getYear() && now.getMonth()==newDate.getMonth() && now.getDate()==newDate.getDate())
              this.setValue(r,newWeekDay,dd,"orange","#ABABAB");
       else if(newDate.getDay()==6 || newDate.getDay()==0)
        this.setValue(r,newWeekDay,dd,"red","#FFFFFF");
       else
           this.setValue(r,newWeekDay,dd,"","#FFFFFF");
      }
     }
    }
   }
  
   CalendarPicker.prototype.clearTab=function()
   {
    for(var i=2;i<8;i++)
    {
        for(var j=0;j<7;j++)
     {
         this.tab.rows[i].cells[j].innerHTML="&nbsp;";
      this.tab.rows[i].cells[j].style.bgcolor="#FFFFFF";
     }
    }
   }

   CalendarPicker.prototype.getMonthDays=function(yyyy,mm)
   {
    if(yyyy%4==0 && mm==2)
    {
        return 29;
    }
    else if(yyyy%4!=0 && mm==2)
    {
        return 28;
    }
    switch(mm)
    {
        case 1:
     case 3:
     case 5:
     case 7:
     case 8:
     case 10:
     case 12:
         return 31;
     break;
     default:return 30;
    }
   }

   CalendarPicker.prototype.setValue=function(x,y,v,f,c)
   {
    if(c.length>0)
    {
        this.tab.rows[x].cells[y].bgColor=c;
    }

    if(f.length>0)
    {
       this.tab.rows[x].cells[y].style.color="#FF0000";
    this.tab.rows[x].cells[y].innerHTML="<a href=/"javascript:void(0)/" onclick=/"setDate('"+v+"')/" style=/"color:"+f+"/" >"+v+"</a>";
    return;
    }
    this.tab.rows[x].cells[y].innerHTML="<a href=/"javascript:void(0)/" onclick=/"setDate('"+v+"')/" >"+v+"</a>";
   }

   CalendarPicker.prototype.init=function()
   {  
       this._selYYYY=document.getElementById("year");;
    this._selMM=document.getElementById("month");
    this.initialYearSelect(this.beginYear,this.endYear);
       this.loadTab();
    this.loadDate();
    var id=window.location.search.substring(1);
    this.container_=parent.document.getElementById(id);
   }

   CalendarPicker.prototype._getDate=function()
   {
    var year=this._selYYYY.options[this._selYYYY.selectedIndex].value;
    var month=this._selMM.options[this._selMM.selectedIndex].value;
    this.loadDate(year,--month);
   }

   CalendarPicker.prototype.moveYear=function(p)
   {
       this.curYYYY=parseInt(this.curYYYY)+parseInt(p);
    this.loadDate(this.curYYYY,this.curMM);
   }

   CalendarPicker.prototype.moveMonth=function(p)
   {
       this.curMM+=p;
    if(this.curMM<0)
    {   
        this.curMM=11;    //December
     this.curYYYY--;
    }
    else if(this.curMM>11)
    {
        this.curMM=0;
     this.curYYYY++;
    }
    this.loadDate(this.curYYYY,this.curMM);
   }

   CalendarPicker.prototype.setDate=function(txt)
   {
       var dateString=this.curYYYY+"-"+(this.curMM+1)+"-"+txt;
    this.container_.value=dateString;
    parent.document.getElementById("caIframe").parentNode.style.display="none";
   }

   CalendarPicker.prototype.initialYearSelect=function(b,e)
   {
    this._selYYYY.options.length=0;
    for(i=0;i<(e-b);i++)
    {
     this._selYYYY.options[i]=new Option(i+b,i+b);
    }
   }

function debug(str)
{
 parent.document.body.insertAdjacentHTML("BeforeEnd",str+"<br>")
}
======================
calendar_done.js
----------------------
<!--
    // author:hanpoyangtitan
 // create:2007-5-25
 // team:Tom Studio

    var bgDiv=null;
 function iframeAutoFit()
    {
        try
        {
            if(window!=parent)
            {
                var a = parent.document.getElementsByTagName("IFRAME");
                for(var i=0; i<a.length; i++) //author:meizz
                {
                    if(a[i].contentWindow==window)
                    {
                        var h1=0, h2=0;
                        a[i].parentNode.style.height = a[i].offsetHeight +"px";
                        a[i].style.height = "10px";
                        if(document.documentElement&&document.documentElement.scrollHeight)
                        {
                            h1=document.documentElement.scrollHeight;
                        }
                        if(document.body) h2=document.body.scrollHeight;

                        var h=Math.max(h1, h2);
                        //if(document.all) {h += 4;}
                        if(window.opera) {h += 1;}
                        a[i].style.height = a[i].parentNode.style.height = h +"px";
                    }
                }
            }
        }
        catch (ex){}
    }
    if(window.attachEvent)
    {
        window.attachEvent("onload",  iframeAutoFit);
        //window.attachEvent("onresize",  iframeAutoFit);
    }
    else if(window.addEventListener)
    {
        window.addEventListener('load',  iframeAutoFit,  false);
        //window.addEventListener('resize',  iframeAutoFit,  false);
    }

  function autoWidth()
  {
      if(window!=parent)
            {
                var a = parent.document.getElementsByTagName("IFRAME");
                for(var i=0; i<a.length; i++) //author:meizz
                {
                    if(a[i].contentWindow==window)
                    {
                        a[i].style.width = a[i].parentNode.style.width = 214 +"px";
                    }
                }
            }
  }

  var calendar=null;

  function init()
  {
      calendar=new CalendarPicker(1900,2080);
   calendar.init();
      iframeAutoFit();
   autoWidth();
   bgDiv=document.getElementById("calBg");
   var pos=parent.getoffset(bgDiv);
   bgDiv.style.left="0px";
   bgDiv.style.top="0px";
   bgDiv.innerHTML="<div align=/"center/">汤 姆</div>"+calendar.curYYYY+"年"+(calendar.curMM+1)+"月";
  }

  function moveYear(year)
  {
      calendar.moveYear(year);
   bgDiv.innerHTML="<div align=/"center/">汤 姆</div>"+calendar.curYYYY+"年"+(calendar.curMM+1)+"月";
  }

  function moveMonth(m)
  {
      calendar.moveMonth(m);
   bgDiv.innerHTML="<div align=/"center/">汤 姆</div>"+calendar.curYYYY+"年"+(calendar.curMM+1)+"月";
  }

  function setDate(v)
  {
      calendar.setDate(v);
  }
  function _getDate()
  {
      calendar._getDate();
   bgDiv.innerHTML="<div align=/"center/">汤 姆</div>"+calendar.curYYYY+"年"+(calendar.curMM+1)+"月";
  }

  //-->
=======================
_calendar.js
--------------------------
      document.write("<div id=/"caDiv/" style=/"width:20px;height:20px; position:absolute; top:0px; left:0px; border:1px solid #EFEFEF; /">-</div>");
      var caiframe=document.createElement("<iframe id=/"caIframe/" frameborder=/"0/" src=/"about:blank/"></iframe>");
   var caDiv=document.getElementById("caDiv");
   caDiv.innerHTML="";
   caDiv.appendChild(caiframe);
   caDiv.style.display="none";
  
      function calendar(id,posid)
   { 
       var container=document.getElementById(posid);
    caDiv.style.display="block";
    caiframe.src="calendar/calendar.html?"+id;
    var pos=getoffset(container)
    caDiv.style.top=pos[0]+container.offsetHeight;
    caDiv.style.left=pos[1];
   }

   function getoffset(e)
      { 
          var t=e.offsetTop; 
          var l=e.offsetLeft; 
          while(e=e.offsetParent)
          { 
              t+=e.offsetTop; 
              l+=e.offsetLeft; 
          } 
          var rec = new Array(1);
          rec[0]  = t;
          rec[1] = l;
          return rec
      }
======================
Demo.html
-------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML xmlns="http://www.w3.org/1999/xhtml">
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script language="javascript" src="calendar/_calendar.js"></script>
 </HEAD>

 <BODY>
    <input type="text" id="ca" name="ca" /><a href="javascript:void(0)" onclick="calendar('ca','obj_1')"><img src="calendar/calendar.gif" border="0" align="absmiddle" id="obj_1"></a>
 <br />
 <select >
   <option value="sdfaf">dsfjkadsfj</option>
 </select>
 sadfasdf<br />
 sadfasdf<br />
 sadfasdf<br />
 sadfasdf<br />
 sadfasdf<br />
 sadfasdf<br />
 sadfasdf<br />
 sadfasdf<br />sadfasdf<br />
 sadfasdf<br />
 sadfasdf<br />
 sadfasdf<br />
 sadfasdf<br />
 sadfasdf<br />
  <input type="text" id="cb" name="ca" /><a href="javascript:void(0)" onclick="calendar('cb')">日期</a
 </BODY>
</HTML>

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞