JavaScript实现的Calendar

最新推荐文章于 2024-06-21 09:41:35 发布

zltpc007

最新推荐文章于 2024-06-21 09:41:35 发布

阅读量825

点赞数

分类专栏： Web开发文章标签： calendar javascript output function border date

Web开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

<style type="text/css">

.TrTitle{

background:#f5d6d6;

height:20;

border-bottom:5px solid #FBEDED;

color:#000; cursor: hand;

}

.TrOver{

background:#f5d6d6;

height:18;

border:0px solid #999999;

color:#ec5657; cursor: hand;

}

.TdOver{

background:#FBEDED;

height:18;width:22px;

border:0px solid #cccccc;



color:#000;cursor: hand;

}

.TdOut{

background:#F5D6D6;

height:16;width:20px;

border:1px solid #FBAFB0;

color:#333333; cursor: hand;

}



.TdOver2{

background:#e6e6e6;

height:18;

border:1px solid #cccccc;

border-top:1px solid #ffffff;

border-left:1px solid #ffffff;

color:#666666;cursor: hand;

}

.TdOut2{

background:#e6e6e6;

height:18;

border:1px solid #ffffff;

border-top:1px solid #cccccc;

border-left:1px solid #cccccc;

color:#000000; cursor: hand;

}

</style>

</HEAD>



<BODY>



<script language="javascript">

document.writeln("<div id='DateGird' style='display:none;position: absolute;border:1px solid #EC5657;background-color: #fbeded;'></div>");

var Glob_YY=parseInt(new Date().getFullYear());

var Glob_MM=parseInt(new Date().getMonth()+1);

var Glob_DD=parseInt(new Date().getDate());



function shotable(InputName)

{

        var DateArray=["日","一","二","三","四","五","六"];

        var output=""

        output=output+"<div style='padding:5px;border:1px solid #fbafb0;'><table style='width:156px;font-size:9pt;cursor:default;border:0px solid #999999;' border='0' cellpadding='0' cellspacing='0'>";

        output=output+"<tr ><td colspan='7' class='TrTitle'><span ID='yearUU'>"+Glob_YY+"</span><span ID='monthUU'>"+Glob_MM+"</span><a href='#' οnclick='return;'>*</a></td></tr><table>";

        output=output+"<table style='font-size:12px;font-family: /"宋体/", Helvetica, sans-serif;cursor:default;border:0px solid #999999;border:1px solid #F5D6D6;' border='1' cellpadding='0' cellspacing='0'>";

        output=output+"<tr align='center'>";

        for(var i=0;i<7;i++) output=output+"<td class='TrOver'>"+DateArray[i]+"</td>";

        output=output+"</tr>";

        for(var i=0;i<6;i++){

        output=output+"<tr align='center'>";

                for(var j=0;j<7;j++) output=output+"<td id='TD' name='TD' class='TdOver' οnmοuseοver='datelist.OverBK(this,/""+InputName.name+"/")' msg=''> </td>";

                        output=output+"</tr>";

                }

        output=output+"</tabe></div>";



var selectMMInnerHTML = "<select ID=/"sMonth/" οnchange=/"setPan(document.getElementById('sYear').value,this.value)/" style='width:50px;background:#F5d6d6'>";

for (var i = 1; i < 13; i++)

{

    if (i == Glob_MM)

       {selectMMInnerHTML += "<option Author=wayx value='" + i + "' selected>" + i + "月" + "</option>/r/n";}

    else {selectMMInnerHTML += "<option Author=wayx value='" + i + "'>" + i + "月" + "</option>/r/n";}

}

selectMMInnerHTML += "</select>";

var selectYYInnerHTML = "<select ID=/"sYear/" οnchange=/"setPan(this.value,document.getElementById('sMonth').value)/" style='width:65px;background:#F5d6d6'>";

for (var i = 1999; i <= Glob_YY; i++)

{

    if (i == Glob_YY)

       {selectYYInnerHTML += "<option Author=wayx value='" + i + "' selected>" + i + "年" + "</option>/r/n";}

    else {selectYYInnerHTML += "<option Author=wayx value='" + i + "'>" + i + "年" + "</option>/r/n";}

}

selectYYInnerHTML += "</select>";

        document.getElementById("DateGird").innerHTML= output;

        document.getElementById("monthUU").innerHTML= selectMMInnerHTML;

        document.getElementById("yearUU").innerHTML= selectYYInnerHTML;

        //document.writeln(output);



}

function classGetDate(sName)

{

this.obj=sName || "uncDate";

//alert(Date.parse(this.obj.value));



this.YY=Glob_YY;

this.MM=Glob_MM;

this.DD=Glob_DD;

document.getElementById("DateGird").style.display="";

setPan(this.YY,this.MM);

}



function GetDay(y,m){

        this.TDate=function(){

                this.DayArray=[];

                for(var i=0;i<42;i++)this.DayArray[i]=" ";

                for(var i=0;i<new Date(y,m,0).getDate();i++)this.DayArray[i+new Date(y,m-1,1).getDay()]=i+1;

                return this.DayArray;

                }

        return this;

        }



function setPan(YY,MM)

{

var DArray=GetDay(YY,MM).TDate();

var TDArr=document.getElementsByName("TD");

if (MM<10){var showMM="0"+MM;}else{var showMM=MM;}

for(var i=0;i<TDArr.length;i++){

        if (Glob_DD==DArray[i]&&YY==new Date().getFullYear()&&MM==new Date().getMonth()+1){TDArr[i].className="TdOut";}else{TDArr[i].className="TdOver"}

        TDArr[i].innerHTML=DArray[i];

        if (DArray[i]<10){var showDD="0"+DArray[i];}else{var showDD=DArray[i];}

        TDArr[i].msg=YY+"-"+showMM+"-"+showDD;

        }

}



datelist={

        dfd:function (sName)

        {

        var dateGirdObj=document.getElementById("DateGird");

        //var i= sName.style.top





        dateGirdObj.style.top=cmGetY(sName)+20;

        dateGirdObj.style.left=cmGetX(sName);

        shotable(sName);

        classGetDate(sName);

        },

        OverBK:function(t,m){

                

                if(t.className!="TdOut"){

                        

                        t.οnmοuseοut=function(){t.className="TdOver";}

                }

                if(t.innerHTML!=" ")t.className="TdOut";

                t.οnclick=function(){

                        if (t.innerHTML!=" "){//alert(t.innerHTML);



                                document.getElementById(m).value=t.msg;

                                t.className="TdOver";

                                document.getElementById("DateGird").style.display="none";

                        }

                }

                

        }

}





function cmGetX (obj){var x = 0;do{x += obj.offsetLeft;obj = obj.offsetParent;}while(obj);return x;}

function cmGetY (obj){var y = 0;do{y += obj.offsetTop;obj = obj.offsetParent;}while(obj);return y;}



</script>



开始时间：<input name="number4" type="text" id="number4" οnfοcus="datelist.dfd(this)" readOnly>

结束时间：<input name="ddd3" type="text" id="ddd3" οnfοcus="datelist.dfd(this)" readOnly> 

</BODY>

</HTML>

zltpc007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现的Calendar

New Document .TrTitle{background:#f5d6d6;height:20;border-bottom:5px solid #FBEDED;color:#000; cursor: hand;}.TrOver{background:#f5d6d6;height:18;border:0px solid #999999
复制链接

扫一扫

专栏目录