javascript 日期日历控件二

最新推荐文章于 2024-11-13 01:18:00 发布

qij2256

最新推荐文章于 2024-11-13 01:18:00 发布

阅读量504

点赞数

分类专栏： JavaScript 文章标签： javascript 日历 function class table date

JavaScript 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

function myCalendar() //构建对象
{
   var myDate = new Date();
   this.year = myDate.getFullYear();
   this.month = myDate.getMonth()+1;
   this.date = myDate.getDate();

   this.format="yyyy-mm-dd";
   this.style = myStyle(1);　
   this.show = createCalendar;
   this.input = createInput;
}

function createCalendar()
{
   var week = new Array('日','一','二','三','四','五','六');

   document.write("<div class='cs' onselectstart='return false' οncοntextmenu='return false' οnmοusedοwn='if(event.button==2)this.style.display=/"none/"' id='myC_div'><div class='shadow'></div><div style='position:absolute;left:0px;top:0px;z-index:1'>");
   //创建头部
   document.write("<table class='tit' id='myC_Top' οnmοusedοwn='myC_x=event.x-parentNode.parentNode.style.pixelLeft;myC_y=event.y-parentNode.parentNode.style.pixelTop;setCapture()' οnmοuseup='releaseCapture();' οnmοusemοve='myCMove(this.parentElement.parentElement);'><tr><td width=10 οnmοuseοver='this.style.color=/"black/"' οnmοuseοut='this.style.color=/"/"' οnclick='cutYear()' style='font-family: Webdings;cursor:hand;' title='减少年份'>7</td><td title='减少月份' οnmοuseοver='this.style.color=/"black/"' οnclick='cutMonth()' οnmοuseοut='this.style.color=/"/"' width=10 style='font-family: Webdings;cursor:hand;'>3</td><td align=center οnmοuseοver=this.className='move1'; οnmοuseοut=this.className='';divHidden(myC.parentElement.nextSibling); οnclick='createyear("+this.year+",this);divShow(myC.parentElement.nextSibling);'></td><td align=center οnclick='createmonth("+this.month+",this);divShow(myC.parentElement.nextSibling)' οnmοuseοver=this.className='move1'; οnmοuseοut=this.className='';divHidden(myC.parentElement.nextSibling);></td><td width=10 οnmοuseοver='this.style.color=/"black/"' οnmοuseοut='this.style.color=/"/"' οnclick='addMonth()' style='font-family: Webdings;cursor:hand;' title='增加月份'>4</td><td width=10 style='font-family: Webdings;cursor:hand;' οnmοuseοver='this.style.color=/"black/"' οnmοuseοut='this.style.color=/"/"' οnclick='addYear()' title='增加年份'>8</td></tr></table>");

   //创建星期条目
   document.write("<table class='week'><tr>");
   for(i=0;i<7;i++)
    document.write("<td align=center>"+week[i]+"</td>");

   document.write("</tr></table>");
   //创建日期条目
   document.write("<table class='ds' id='myC' cellspacing=2 cellpadding=0>");
   for(i=0;i<6;i++)
   {
    document.write("<tr>");
    for(j=0;j<7;j++)
    document.write("<td width=10% height=16 align=center οnmοuseοver='mOver(this)' οnmοuseοut='mOut(this)' οnclick='if(this.innerText!=/"/")getValue(inputName,this.innerText);myC_div.style.display=/"none/"'></td>");
    document.write("</tr>");
   }
   document.write("</table>");

   //建建水印
   document.write("</div>");
   //创建选择图层
   document.write("<div style='position:absolute;left:0px;top:0px;z-index:3' οnmοuseοver=divShow(this) οnmοuseοut=divHidden(this)></div>");
   document.write("</div>");

   //显示日期
   showDate(this.year,this.month);
   myC_div.style.display='none';
}

//一些附加函数--------------------
//---------Begin-------------------
function mOver(obj){obj.className = 'mover';}
function mOut(obj){if(obj.className=='mover')obj.className = '';}
function addYear(){var year = parseInt(myC_Top.cells[2].innerText);var month = parseInt(myC_Top.cells[3].innerText); year++;showDate(year,month);}
function addMonth(){var year = parseInt(myC_Top.cells[2].innerText);var month = parseInt(myC_Top.cells[3].innerText);month++;if(month>12){month=1;year++;}showDate(year,month);}
function cutYear(){var year = parseInt(myC_Top.cells[2].innerText);var month = parseInt(myC_Top.cells[3].innerText);year--;showDate(year,month);}
function cutMonth(){var year = parseInt(myC_Top.cells[2].innerText);var month = parseInt(myC_Top.cells[3].innerText);month--;if(month<1){month=12;year--;}showDate(year,month);}

function createmonth(month,obj)//创建月份选择
{
   var mstr;
   var oDiv;
   mstr="<table class='move1' cellspacing=0 cellpadding=2 width="+obj.offsetWidth+">";
   for(i=1;i<13;i++)
    if (month==i)
     mstr+="<tr style='background-color:#909eff'><td style='color:black;height:16px;cursor:hand' align=center οnclick='myC_Top.cells[3].innerText=this.innerText;showDate(parseInt(myC_Top.cells [2].innerText),"+i+");myC.parentElement.nextSibling.innerHTML=/"/"'>"+ i+"月</td></tr>";
    else
    mstr+="<tr><td align=center style='cursor:hand' οnmοuseοver='divS(this)' οnclick='myC_Top.cells[3].innerText=this.innerText;showDate(parseInt(myC_Top.cells [2].innerText),"+i+");myC.parentElement.nextSibling.innerHTML=/"/"'>"+ i+"月</td></tr>";

   mstr+="</table>";
   oDiv = myC.parentElement.nextSibling;
   oDiv.innerHTML='';
   oDiv.innerHTML = mstr;
   showDiv(oDiv,obj.offsetTop+obj.offsetHeight,obj.offsetLeft);
}

function showDiv(obj,top,left)
{
obj.style.pixelTop=top;
obj.style.pixelLeft=left;
}

function myCMove(obj)
{
   if(event.button==1)
   {
    var X = obj.clientLeft;
    var Y = obj.clientTop;
    obj.style.pixelLeft= X+(event.x-myC_x);
    obj.style.pixelTop= Y+(event.y-myC_y);
    window.status=myC_y;
   }
}