Several good js calendar

The first paragraph:

js script
/* alin */
/* Email:caoailin111@sohu.com */
/* QQ:38062022 */
/* Creation date: 2004-6-13 */
var myC_x,myC_y;
var myC_timeset=null,myC_timeset1=null;
var divObj=null;
var inputName;
function myCalendar() //Constructing an object 
{
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 myStyle(num) //Set style 
{
if(!num||isNaN(num)){alert('Parameters wrong ,Using the default style! ');num=1;}
var style = new Array();
style[1]=".week{background-color:#DfDfff;font-size:12px;width:140px;}"
+".ds{width:140px;font-size:12px;cursor:hand}"
+".mover{border:1px solid black;background-color:#f4f4f4;}"
+".move1{border:1px solid #5d5d5d;background-color:#f4f4f4;color:#909eff;font-size:12px}"
+".tit{background-color:#909EFF;width:140px;font-size:12px;color:white;cursor:default}"
+".cs{position:absolute;border:1px solid #909eff;width:142px;left:0px;top:0px;z-index:9999;}"
+".shadow{position:absolute;left:0px;top:0px;font-family: Arial Black;font-size:50px;color:#d4d4d4;z-index:1;text-align:center;}";
document.write("<style type='text/css'>");
document.write(style[num]);
document.write("</style>");
}
function createCalendar()
{
var week = new Array('Day ','A ','2. ','Three ','Four ','Five ','Six ');
document.write("<div onselectstart='return false' oncontextmenu='return false' onmousedown='if(event.button==2)this.style.display=\"none\"'><div></div><div>");
//Create head 
document.write("<table onmousedown='myC_x=event.x-parentNode.parentNode.style.pixelLeft;myC_y=event.y-parentNode.parentNode.style.pixelTop;setCapture()' onmouseup='releaseCapture();' onmousemove='myCMove(this.parentElement.parentElement);'><tr><td width=10'this.style.color=\"black\"''this.style.color=\"\"' title='Reduce year '>7</td><td title='Reduce month ''this.style.color=\"black\"''this.style.color=\"\"' width=10>3</td><td align=center'move1';'';divHidden(myC.parentElement.nextSibling);></td><td align=center'move1';'';divHidden(myC.parentElement.nextSibling);></td><td width=10'this.style.color=\"black\"''this.style.color=\"\"' title='Increase month '>4</td><td width=10'this.style.color=\"black\"''this.style.color=\"\"' title='Increase year '>8</td></tr></table>");
//Create the week entry 
document.write("<table><tr>");
for(i=0;i<7;i++)
document.write("<td align=center>"+week[i]+"</td>");
document.write("</tr></table>");
//Create date entry 
document.write("<table 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'if(this.innerText!=\"\")getValue(inputName,this.innerText);myC_div.style.display=\"none\"'></td>");
document.write("</tr>");
}
document.write("</table>");
//Building built watermark 
document.write("</div>");
//Create a layer 
document.write("<div");
document.write("</div>");
//Displays the date 
showDate(this.year,this.month);
myC_div.style.display='none';
}
function getValue(obj,value)
{
eval(obj).value=parseInt(myC_Top.cells[2].innerText)+"-"+parseInt(myC_Top.cells[3].innerText)+"-"+value;
}
function showDate(year,month)
{
var myDate = new Date(year,month-1,1);
var today = new Date();
var day = myDate.getDay();
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;
for(i=0;i<myC.cells.length;i++)myC.cells[i].innerHTML = "";
for(i=0;i<length[month-1];i++)
{
myC.cells[i+day].innerHTML = (i+1);
if(new Date(year,month-1,i+1).getDay()==6||new Date(year,month-1,i+1).getDay()==0){myC.cells[i+day].style.color='red';}
}
myC_Top.cells[2].innerText=year+"Year ";
myC_Top.cells[3].innerText=month+"Month ";
with(myC.parentNode.previousSibling.style)
{
pixelLeft=myC.offsetLeft;
pixelTop=myC.offsetTop;
height = myC.clientHeight;
width = myC.clientWidth;
}
myC.parentElement.parentElement.style.height=myC.parentElement.offsetHeight;
myC.parentElement.previousSibling.innerHTML=year;
}
//Some additional functions --------------------
//---------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 divS(obj)
{
if(obj!=divObj)
{
obj.style.backgroundColor="#909eff";
obj.style.color='black';
}
if(divObj!=null)
{
divObj.style.backgroundColor='';
divObj.style.color='';
}
divObj = obj;
}
function divShow(obj)
{ if (myC_timeset!=null) clearTimeout(myC_timeset);
obj.style.display='block';
}
function divHidden(obj){myC_timeset=window.setTimeout(function(){obj.style.display='none'},500);}
function createyear(year,obj)//Create year selection 
{
var ystr;
var oDiv;
ystr="<table cellspacing=0 cellpadding=2 width="+obj.offsetWidth+">";
ystr+="<tr><td'createyear("+(year-20)+",myC_Top.cells[2])' align=center>Turn on the </td></tr>";
for(i=year-10;i<year+10;i++)
if(year==i)
ystr+="<tr><td align=center'myC_Top.cells[2].innerText=this.innerText;showDate("+i+",parseInt(myC_Top.cells[3].innerText));myC.parentElement.nextSibling.innerHTML=\"\"'>"+i+"Year </td></tr>";
else
ystr+="<tr><td align=center'myC_Top.cells[2].innerText=this.innerText;showDate("+i+",parseInt(myC_Top.cells[3].innerText));myC.parentElement.nextSibling.innerHTML=\"\"'>"+i+"Year </td></tr>";
ystr+="<tr><td'createyear("+(year+20)+",myC_Top.cells[2])' align=center>Down </td></tr>";
ystr+="</table>";
oDiv = myC.parentElement.nextSibling;
oDiv.innerHTML='';
oDiv.innerHTML = ystr;
showDiv(oDiv,obj.offsetTop+obj.offsetHeight,obj.offsetLeft);
}
function createmonth(month,obj)//Select create a month 
{
var mstr;
var oDiv;
mstr="<table cellspacing=0 cellpadding=2 width="+(obj.offsetWidth+5)+">";
for(i=1;i<13;i++)
if (month==i)
mstr+="<tr><td align=center'myC_Top.cells[3].innerText=this.innerText;showDate(parseInt(myC_Top.cells[2].innerText),"+i+");myC.parentElement.nextSibling.innerHTML=\"\"'>"+i+"Month </td></tr>";
else
mstr+="<tr><td align=center'myC_Top.cells[3].innerText=this.innerText;showDate(parseInt(myC_Top.cells[2].innerText),"+i+");myC.parentElement.nextSibling.innerHTML=\"\"'>"+i+"Month </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;
}
}
function showDiv2(obj)
{
inputName=obj.name;
var e=obj;
var ot = obj.offsetTop;
var ol=obj.offsetLeft;
while(obj=obj.parentElement){ot+=obj.offsetTop;ol+=obj.offsetLeft;}
myC_div.style.pixelTop=ot+e.offsetHeight;
myC_div.style.pixelLeft=ol;
myC_div.style.display="block";
}
function createInput(name)
{myC_div.style.display='none';
document.write("<input type='text' name='"+name+"' size=20>");
}
// --------------End ---------------------
</script>
<script>
var myCalendar=new myCalendar;
myCalendar.year=2009;
myCalendar.show();
myCalendar.input("txt1");
</script>


Page call
<input type="text" name="test" readonly=true>


Second paragraph:

js script
var bMoveable=true;
var strFrame;        

document.writeln('<iframe"position: absolute;  z-index: 9998; display: none"></iframe>');
strFrame='<style>';
strFrame+='INPUT.button{BORDER-RIGHT: #63A3E9 1px solid;BORDER-TOP: #63A3E9 1px solid;BORDER-LEFT: #63A3E9 1px solid;';
strFrame+='BORDER-BOTTOM: #63A3E9 1px solid;BACKGROUND-COLOR: #63A3E9;font-family:Tahoma ;}';
strFrame+='TD{FONT-SIZE: 9pt;font-family:Tahoma ;}';
strFrame+='</style>';
strFrame+='<scr' + 'ipt>';
strFrame+='var datelayerx,datelayery;';
strFrame+='var bDrag;';
strFrame+='function document.onmousemove()';
strFrame+='{if(bDrag && window.event.button==1)';
strFrame+='    {var DateLayer=parent.document.all.endDateLayer.style;';
strFrame+='        DateLayer.posLeft += window.event.clientX-datelayerx;';
strFrame+='        DateLayer.posTop += window.event.clientY-datelayery;}}';
strFrame+='function DragStart()';
strFrame+='{var DateLayer=parent.document.all.endDateLayer.style;';
strFrame+='    datelayerx=window.event.clientX;';
strFrame+='    datelayery=window.event.clientY;';
strFrame+='    bDrag=true;}';
strFrame+='function DragEnd(){';
strFrame+='    bDrag=false;}';
strFrame+='</scr' + 'ipt>';
strFrame+='<div  onselectstart="return false">';
strFrame+='<span"z-index: 9999;position: absolute;top: 3; left: 19;display: none"></span>';
strFrame+='<span"z-index: 9999;position: absolute;top: 3; left: 78;display: none"></span>';
strFrame+='<span"z-index: 9999;position: absolute;top: 188; left: 35px;display: none"></span>';
strFrame+='<span"z-index:9999;position:absolute;top: 188; left: 77px;display: none"></span>';
strFrame+='<span"z-index:9999;position:absolute;top: 188; left: 119px;display: none"></span>';
strFrame+='<table border=1 cellspacing=0 cellpadding=0 width=142 height=160 bordercolor=#63A3E9 bgcolor=#63A3E9 >';
strFrame+='    <tr><td width=142 height=23  bgcolor=#FFFFFF>';
strFrame+='        <table border=0 cellspacing=1 cellpadding=0 width=158  height=23>';
strFrame+='            <tr align=center >';
strFrame+='                <td width=16 align=center bgcolor=#63A3E9 ';
strFrame+='                       title="Forward 1 month " ><b >&lt;</b></td>';
strFrame+='                   <td width=60 align="center" bgcolor="#63A3E9"  ';
strFrame+='                      "style.backgroundColor=\'#aaccf3\'"';
strFrame+='                      "style.backgroundColor=\'#63A3E9\'" ';
strFrame+='                       ';
strFrame+='                       title="Click here to select the year "><span ';
strFrame+='                   <td width=48 align="center" ';
strFrame+='                       bgcolor="#63A3E9""style.backgroundColor=\'#aaccf3\'" ';
strFrame+='                      "style.backgroundColor=\'#63A3E9\'" ';
strFrame+='                      ';
strFrame+='                       title="Click here to select a month "><span';
strFrame+='                   <td width=16 bgcolor=#63A3E9 align=center ';
strFrame+='                       title="Backward in 1 month " ><b >&gt;</b></td>';
strFrame+='               </tr>';
strFrame+='           </table></td></tr>';
strFrame+='       <tr><td width=142 height=18 >';
strFrame+='           <table border=0 cellspacing=0 cellpadding=2 bgcolor=#63A3E9 ' + (bMoveable? 'onmousedown="DragStart()" onmouseup="DragEnd()"':'');
strFrame+='                BORDERCOLORLIGHT=#63A3E9 BORDERCOLORDARK=#FFFFFF width=140 height=20 >';
strFrame+='       <tr><td width=20>&nbsp;Day </td>';
strFrame+='<td >&nbsp;A </td><td>&nbsp;2. </td>';
strFrame+='<td >&nbsp;Three </td><td >&nbsp;Four </td>';
strFrame+='<td >&nbsp;Five </td><td >&nbsp;Six </td></tr>';
strFrame+='</table></td></tr>';
strFrame+='  <tr ><td width=142 height=120 >';
strFrame+='    <table border=1 cellspacing=2 cellpadding=2 BORDERCOLORLIGHT=#63A3E9 BORDERCOLORDARK=#FFFFFF bgcolor=#fff8ec width=140 height=120 >';
var n=0; for (j=0;j<5;j++){ strFrame+= ' <tr align=center >'; for (i=0;i<7;i++){
strFrame+='<td width=20 height=20'+n+'';n++;}
strFrame+='</tr>';}
strFrame+='      <tr align=center >';
for (i=35;i<37;i++)strFrame+='<td width=20 height=20'+i+' ></td>';
strFrame+='        <td colspan=5 align=right><span';
strFrame+='        "style.color=\'#ff0000\'""style.color=\'#1478eb\'" title="Set the date blank ">Blank </span>&nbsp;&nbsp;<span';
strFrame+='        "style.color=\'#ff0000\'""style.color=\'#1478eb\'" title="The current date and time ">The current </span>&nbsp;&nbsp;<span"style.color=\'#ff0000\'""style.color=\'#1478eb\'"  title="Close the calendar ">Shut down &nbsp;</span></td></tr>';
strFrame+='    </table></td></tr><tr ><td >';
strFrame+='        <table border=0 cellspacing=1 cellpadding=0 width=100%  bgcolor=#FFFFFF height=22 >';
strFrame+='          <tr bgcolor="#63A3E9"><td"cursor:hand" title="Click here to enable /Disable the time "';
strFrame+='               "style.backgroundColor=\'#aaccf3\'" align=center"style.backgroundColor=\'#63A3E9\'"';
strFrame+='                >';
strFrame+=' <span></span></td>';
strFrame+='             <td';
strFrame+='"style.backgroundColor=\'#aaccf3\'""style.backgroundColor=\'#63A3E9\'"';
strFrame+=' title="Click here to select time " align=center width=42>' ;
strFrame+='                    <span';
strFrame+='             <td';
strFrame+='"style.backgroundColor=\'#aaccf3\'""style.backgroundColor=\'#63A3E9\'"';
strFrame+=' title="Click here to select time " align=center width=42>' ;
strFrame+='                    <span';
strFrame+='             <td';
strFrame+='"style.backgroundColor=\'#aaccf3\'""style.backgroundColor=\'#63A3E9\'"';
strFrame+=' title="Click here to select time " align=center width=42>' ;
strFrame+='                    <span';
strFrame+='             </tr></table></td></tr></table></div>';

window.frames.endDateLayer.document.writeln(strFrame);
window.frames.endDateLayer.document.close();        //Fix ie progress bar does not end the problem 


//==================================================== WEB The page display section ======================================================
var outObject;
var outButton;        //Click on the button 

var outDate="";        //The date deposited objects 
var bUseTime=false;        //Whether to use the time 
var odatelayer=window.frames.endDateLayer.document.all;        //Hold the calendar object 
var odatelayer=window.endDateLayer.document.all;
//odatelayer.bUseTimeLayer.innerText="NO";
bImgSwitch();
odatelayer.bUseTimeLayer.innerHTML=bImg;
 
function setday(tt,obj) //The main transfer function 
{ 
    if (arguments.length > 2){alert("I'm sorry! the incoming parameters of this control too much. ");return;}
    if (arguments.length == 0){alert("Sorry, you do not have any arguments for this control is passed back! ");return;}
    var dads = document.all.endDateLayer.style;
    var th = tt;
    var ttop = tt.offsetTop;    //TTThe control's anchor high 

    var thei = tt.clientHeight;    //TTThe control's own high 
    var tleft = tt.offsetLeft;    //TTThe anchor for the width control 

    var ttyp = tt.type;    //TTThe type of the control 

    while (tt = tt.offsetParent){ttop+=tt.offsetTop; tleft+=tt.offsetLeft;}
    var cw = document.getElementById('endDateLayer').clientWidth, ch = document.getElementById('endDateLayer').clientHeight;
    var dw = document.body.clientWidth, dl = document.body.scrollLeft, dt = document.body.scrollTop;
    
    if (document.body.clientHeight + dt - ttop - thei >= ch) dads.top = (ttyp=="image")? ttop + thei : ttop + thei + 6;
    else dads.top  = (ttop - dt < ch) ? ((ttyp=="image")? ttop + thei : ttop + thei + 6) : ttop - ch;
    if (dw + dl - tleft >= cw) dads.left = tleft; else dads.left = (dw >= cw) ? dw - cw + dl : dl;


    //while (tt = tt.offsetParent){ttop+=tt.offsetTop; tleft+=tt.offsetLeft;}
     //dads.top = (ttyp=="image") ? ttop+thei : ttop+thei+6;
     //dads.left = tleft;
    outObject = (arguments.length == 1) ? th : obj;
    outButton = (arguments.length == 1) ? null : th;    //Set the button tapping 

    //According to the current input box of the date display calendar year 
    var reg = /^(\d+)-(\d{1,2})-(\d{1,2})/;        //Not including time 
    var r = outObject.value.match(reg);
    if(r!=null){
        r[2]=r[2]-1;
        var d=new Date(r[1],r[2],r[3]);
        if(d.getFullYear()==r[1] && d.getMonth()==r[2] && d.getDate()==r[3])
        {
            outDate=d;
            parent.meizzTheYear = r[1];
            parent.meizzTheMonth = r[2];
            parent.meizzTheDate = r[3];
        }
        else
        {
            outDate="";
        }
        meizzSetDay(r[1],r[2]+1);
    }
    else
    {
        outDate="";
        meizzSetDay(new Date().getFullYear(), new Date().getMonth() + 1);
    }
    dads.display = '';

    //Determine whether the use of time during initialization ,Non-strict validation 
    //if (outObject.value.length>10)
    //{
        bUseTime=true;
        bImgSwitch();
        odatelayer.bUseTimeLayer.innerHTML=bImg;
        meizzWriteHead(meizzTheYear,meizzTheMonth);
    //}
    //else
    //{
    //    bUseTime=false;
    //    bImgSwitch();
    //    odatelayer.bUseTimeLayer.innerHTML=bImg;
    //    meizzWriteHead(meizzTheYear,meizzTheMonth);
    //}

    try
    {
        event.returnValue=false;
    }
    catch (e)
    {
        //Here exclude errors, the error causes yet found. 
    }
}

var MonHead = new Array(12);    //Define each month in the Gregorian calendar days 

MonHead[0] = 31; MonHead[1] = 28; MonHead[2] = 31; MonHead[3] = 30; MonHead[4]  = 31; MonHead[5]  = 30;
MonHead[6] = 31; MonHead[7] = 31; MonHead[8] = 30; MonHead[9] = 31; MonHead[10] = 30; MonHead[11] = 31;

var meizzTheYear=new Date().getFullYear(); //Define the variable's initial value 

var meizzTheMonth=new Date().getMonth()+1; //Define the variable's initial value for the month 

var meizzTheDate=new Date().getDate();    //Defines the initial value of the variable, 
var meizzTheHour=new Date().getHours();    //Defines the initial value of the variable hours 

var meizzTheMinute=new Date().getMinutes();//The initial value of the variable defined minutes 
var meizzTheSecond=new Date().getSeconds();//Defining a second variable's initial value 

var meizzWDay=new Array(37);    //Define an array of dates 

function document.onclick() //When you click anywhere to close the control //ie6Can you switch focus from the following processing instead 
{ 
    with(window.event)
    {
        if (srcElement != outObject && srcElement != outButton)
        closeLayer();
    }
}

function document.onkeyup()        //Press the ESC key to close, switch the focus off 
{
    if (window.event.keyCode==27){
        if(outObject)outObject.blur();
        closeLayer();
    }
    else if(document.activeElement)
    {
        if(document.activeElement != outObject && document.activeElement != outButton)
        {
            closeLayer();
        }
    }
}

function meizzWriteHead(yy,mm,ss)    //Write to the head of the current year and month 
{
    odatelayer.meizzYearHead.innerText    = yy + " Year ";
    odatelayer.meizzMonthHead.innerText    = format(mm) + " Month ";
    //Insert the current hour, minute 
    odatelayer.meizzHourHead.innerText=bUseTime?(meizzTheHour+" When "):""; 
    odatelayer.meizzMinuteHead.innerText=bUseTime?(meizzTheMinute+" Division "):"";
    odatelayer.meizzSecondHead.innerText=bUseTime?(meizzTheSecond+" Seconds "):"";
}

function tmpSelectYearInnerHTML(strYear) //The year of the drop-down box. 
{
    if (strYear.match(/\D/)!=null){alert("Year input parameter is not a number! ");return;}
    var m = (strYear) ? strYear : new Date().getFullYear();
    if (m < 1000 || m > 9999) {alert("The year value in the 1000 to 9999! ");return;}
    var n = m - 50;
    if (n < 1000) n = 1000;
    if (n + 101 > 9999) n = 9974;
    var s = "&nbsp;<select name=tmpSelectYear "
    s += "onblur='document.all.tmpSelectYearLayer.style.display=\"none\"' "
    s += "onchange='document.all.tmpSelectYearLayer.style.display=\"none\";"
    s += "parent.meizzTheYear = this.value; parent.meizzSetDay(parent.meizzTheYear,parent.meizzTheMonth)'>\r\n";
    var selectInnerHTML = s;
    for (var i = n; i < n + 101; i++)
    {
        if (i == m) { selectInnerHTML += "<option value='" + i + "' selected>" + i + "Year " + "</option>\r\n"; }
        else { selectInnerHTML += "<option value='" + i + "'>" + i + "Year " + "</option>\r\n"; }
    }
    selectInnerHTML += "</select>";
    odatelayer.tmpSelectYearLayer.style.display="";
    odatelayer.tmpSelectYearLayer.innerHTML = selectInnerHTML;
    odatelayer.tmpSelectYear.focus();
}

function tmpSelectMonthInnerHTML(strMonth) //The drop-down box of the month 
{
    if (strMonth.match(/\D/)!=null){alert("Month input parameter is not a number! ");return;}
    var m = (strMonth) ? strMonth : new Date().getMonth() + 1;
    var s = "&nbsp;&nbsp;&nbsp;<select name=tmpSelectMonth "
    s += "onblur='document.all.tmpSelectMonthLayer.style.display=\"none\"' "
    s += "onchange='document.all.tmpSelectMonthLayer.style.display=\"none\";"
    s += "parent.meizzTheMonth = this.value; parent.meizzSetDay(parent.meizzTheYear,parent.meizzTheMonth)'>\r\n";
    var selectInnerHTML = s;
    for (var i = 1; i < 13; i++)
    {
        if (i == m) { selectInnerHTML += "<option value='"+i+"' selected>"+i+"Month "+"</option>\r\n"; }
        else { selectInnerHTML += "<option value='"+i+"'>"+i+"Month "+"</option>\r\n"; }
    }
    selectInnerHTML += "</select>";
    odatelayer.tmpSelectMonthLayer.style.display="";
    odatelayer.tmpSelectMonthLayer.innerHTML = selectInnerHTML;
    odatelayer.tmpSelectMonth.focus();
}

/***** Increase the hours, minutes, ***/
function tmpSelectHourInnerHTML(strHour) //Hour of the drop-down box. 
{
    if (!bUseTime){return;}

    if (strHour.match(/\D/)!=null){alert("Hour input parameter is not a number! ");return;}
    var m = (strHour) ? strHour : new Date().getHours();
    var s = "<select name=tmpSelectHour "
    s += "onblur='document.all.tmpSelectHourLayer.style.display=\"none\"' "
    s += "onchange='document.all.tmpSelectHourLayer.style.display=\"none\";"
    s += "parent.meizzTheHour = this.value; parent.evaSetTime(parent.meizzTheHour,parent.meizzTheMinute);'>\r\n";
    var selectInnerHTML = s;
    for (var i = 0; i < 24; i++)
    {
        if (i == m) { selectInnerHTML += "<option value='"+i+"' selected>"+i+"</option>\r\n"; }
        else { selectInnerHTML += "<option value='"+i+"'>"+i+"</option>\r\n"; }
    }
    selectInnerHTML += "</select>";
    odatelayer.tmpSelectHourLayer.style.display="";
    odatelayer.tmpSelectHourLayer.innerHTML = selectInnerHTML;
    odatelayer.tmpSelectHour.focus();
}

function tmpSelectMinuteInnerHTML(strMinute) //Minutes of the drop-down box. 
{
    if (!bUseTime){return;}

    if (strMinute.match(/\D/)!=null){alert("Minutes of the input parameter is not a number! ");return;}
    var m = (strMinute) ? strMinute : new Date().getMinutes();
    var s = "<select name=tmpSelectMinute "
    s += "onblur='document.all.tmpSelectMinuteLayer.style.display=\"none\"' "
    s += "onchange='document.all.tmpSelectMinuteLayer.style.display=\"none\";"
    s += "parent.meizzTheMinute = this.value; parent.evaSetTime(parent.meizzTheHour,parent.meizzTheMinute);'>\r\n";
    var selectInnerHTML = s;
    for (var i = 0; i < 60; i++)
    {
        if (i == m) { selectInnerHTML += "<option value='"+i+"' selected>"+i+"</option>\r\n"; }
        else { selectInnerHTML += "<option value='"+i+"'>"+i+"</option>\r\n"; }
    }
    selectInnerHTML += "</select>";
    odatelayer.tmpSelectMinuteLayer.style.display="";
    odatelayer.tmpSelectMinuteLayer.innerHTML = selectInnerHTML;
    odatelayer.tmpSelectMinute.focus();
}

function tmpSelectSecondInnerHTML(strSecond) //A second drop-down box. 
{
    if (!bUseTime){return;}

    if (strSecond.match(/\D/)!=null){alert("Minutes of the input parameter is not a number! ");return;}
    var m = (strSecond) ? strSecond : new Date().getMinutes();
    var s = "<select name=tmpSelectSecond "
    s += "onblur='document.all.tmpSelectSecondLayer.style.display=\"none\"' "
    s += "onchange='document.all.tmpSelectSecondLayer.style.display=\"none\";"
    s += "parent.meizzTheSecond = this.value; parent.evaSetTime(parent.meizzTheHour,parent.meizzTheMinute,parent.meizzTheSecond);'>\r\n";
    var selectInnerHTML = s;
    for (var i = 0; i < 60; i++)
    {
        if (i == m) { selectInnerHTML += "<option value='"+i+"' selected>"+i+"</option>\r\n"; }
        else { selectInnerHTML += "<option value='"+i+"'>"+i+"</option>\r\n"; }
    }
    selectInnerHTML += "</select>";
    odatelayer.tmpSelectSecondLayer.style.display="";
    odatelayer.tmpSelectSecondLayer.innerHTML = selectInnerHTML;
    odatelayer.tmpSelectSecond.focus();
}

function closeLayer()    //This layer of close 
{
    var o = document.getElementById("endDateLayer");
    if (o != null)
    {
        o.style.display="none";
    }
}

function showLayer()    //This layer of close 
{
    document.all.endDateLayer.style.display="";
}

function IsPinYear(year)    //In determining whether a flat year leap 
{
    if (0==year%4&&((year%100!=0)||(year%400==0))) return true;else return false;
}

function GetMonthCount(year,month)    //Leap year day, February 29 
{
    var c=MonHead[month-1];if((month==2)&&IsPinYear(year)) c++;return c;
}

function GetDOW(day,month,year)    //For one day of the week 
{
    var dt=new Date(year,month-1,day).getDay()/7; return dt;
}

function meizzPrevY()    //To turn the Year 
{
    if(meizzTheYear > 999 && meizzTheYear <10000){meizzTheYear--;}
    else{alert("The year is out of range (1000 -9999)! ");}
    meizzSetDay(meizzTheYear,meizzTheMonth);
}
function meizzNextY()    //Over the next Year 
{
    if(meizzTheYear > 999 && meizzTheYear <10000){meizzTheYear++;}
    else{alert("The year is out of range (1000 -9999)! ");}
    meizzSetDay(meizzTheYear,meizzTheMonth);
}
function setNull()
{
    outObject.value = '';
    closeLayer();
}
function meizzToday()    //Today Button
{
    parent.meizzTheYear        = new Date().getFullYear();
    parent.meizzTheMonth    = new Date().getMonth()+1;
    parent.meizzTheDate        = new Date().getDate();
    parent.meizzTheHour        = new Date().getHours();
    parent.meizzTheMinute    = new Date().getMinutes();
    parent.meizzTheSecond    = new Date().getSeconds();
    var meizzTheSecond        = new Date().getSeconds();

    if (meizzTheMonth<10 && meizzTheMonth.length<2)    //Formatted with two-digit number 
    {
        parent.meizzTheMonth="0"+parent.meizzTheMonth;
    }
    if (parent.meizzTheDate<10 && parent.meizzTheDate.length<2)    //Formatted with two-digit number 
    {
        parent.meizzTheDate="0"+parent.meizzTheDate;
    }
    //meizzSetDay(meizzTheYear,meizzTheMonth);
    if(outObject)
    {
        if (bUseTime)
        {
            outObject.value= parent.meizzTheYear + "-" + format( parent.meizzTheMonth) + "-" + 
                            format(parent.meizzTheDate) + " " + format(parent.meizzTheHour) + ":" + 
                            format(parent.meizzTheMinute) + ":" + format(parent.meizzTheSecond); 
                            //Note: Here you can output to your desired format 
        }
        else
        {
            outObject.value= parent.meizzTheYear + "-" + format( parent.meizzTheMonth) + "-" + 
                            format(parent.meizzTheDate); //Note: Here you can output to your desired format 
        }
    }
    closeLayer();
}
function meizzPrevM()    //To turn the month 
{
    if(meizzTheMonth>1){meizzTheMonth--}else{meizzTheYear--;meizzTheMonth=12;}
    meizzSetDay(meizzTheYear,meizzTheMonth);
}
function meizzNextM()    //Over the next month 
{
    if(meizzTheMonth==12){meizzTheYear++;meizzTheMonth=1}else{meizzTheMonth++}
    meizzSetDay(meizzTheYear,meizzTheMonth);
}

// TODO: Organize code 
function meizzSetDay(yy,mm)    //Major writers **********
{
    meizzWriteHead(yy,mm);
    //Sets the current month's public variables as the values passed 

    meizzTheYear=yy;
    meizzTheMonth=mm;

    for (var i = 0; i < 37; i++){meizzWDay[i]=""};    //Displays the contents of the box clear all 

    var day1 = 1,day2=1,firstday = new Date(yy,mm-1,1).getDay();    //A month on the first day of the week 

    for (i=0;i<firstday;i++)meizzWDay[i]=GetMonthCount(mm==1?yy-1:yy,mm==1?12:mm-1)-firstday+i+1    //Last month's last days 

    for (i = firstday; day1 < GetMonthCount(yy,mm)+1; i++) { meizzWDay[i]=day1;day1++; }
    for (i=firstday+GetMonthCount(yy,mm);i<37;i++) { meizzWDay[i]=day2;day2++; }
    for (i = 0; i < 37; i++)
    {
        var da = eval("odatelayer.meizzDay"+i)    //Writing new dates a month arranged week 

    if (meizzWDay[i]!="")
    {
        //Initialize the border 
        da.borderColorLight="#63A3E9";
        da.borderColorDark="#63A3E9";
        da.style.color="#1478eb";
        if(i<firstday)        //Last month's section 
        {
            da.innerHTML="<b><font color=#BCBABC>" + meizzWDay[i] + "</font></b>";
            da.title=(mm==1?12:mm-1) +"Month " + meizzWDay[i] + "Day ";
            da.onclick=Function("meizzDayClick(this.innerText,-1)");

            if(!outDate)
                da.style.backgroundColor = ((mm==1?yy-1:yy) == new Date().getFullYear() && 
                    (mm==1?12:mm-1) == new Date().getMonth()+1 && meizzWDay[i] == new Date().getDate()) ?
                     "#5CEFA0":"#f5f5f5";
            else
            {
                da.style.backgroundColor =((mm==1?yy-1:yy)==outDate.getFullYear() && (mm==1?12:mm-1)== outDate.getMonth() + 1 && 
                meizzWDay[i]==outDate.getDate())? "#84C1FF" :
                (((mm==1?yy-1:yy) == new Date().getFullYear() && (mm==1?12:mm-1) == new Date().getMonth()+1 && 
                meizzWDay[i] == new Date().getDate()) ? "#5CEFA0":"#f5f5f5");
                //Drag the selected date is displayed as concave down 

                if((mm==1?yy-1:yy)==outDate.getFullYear() && (mm==1?12:mm-1)== outDate.getMonth() + 1 && 
                meizzWDay[i]==outDate.getDate())
                {
                    da.borderColorLight="#FFFFFF";
                    da.borderColorDark="#63A3E9";
                }
            }
        }
        else if (i>=firstday+GetMonthCount(yy,mm))        //Part of the next month 
        {
            da.innerHTML="<b><font color=#BCBABC>" + meizzWDay[i] + "</font></b>";
            da.title=(mm==12?1:mm+1) +"Month " + meizzWDay[i] + "Day ";
            da.onclick=Function("meizzDayClick(this.innerText,1)");
            if(!outDate)
                da.style.backgroundColor = ((mm==12?yy+1:yy) == new Date().getFullYear() && 
                    (mm==12?1:mm+1) == new Date().getMonth()+1 && meizzWDay[i] == new Date().getDate()) ?
                     "#5CEFA0":"#f5f5f5";
            else
            {
                da.style.backgroundColor =((mm==12?yy+1:yy)==outDate.getFullYear() && (mm==12?1:mm+1)== outDate.getMonth() + 1 && 
                meizzWDay[i]==outDate.getDate())? "#84C1FF" :
                (((mm==12?yy+1:yy) == new Date().getFullYear() && (mm==12?1:mm+1) == new Date().getMonth()+1 && 
                meizzWDay[i] == new Date().getDate()) ? "#5CEFA0":"#f5f5f5");
                //Drag the selected date is displayed as concave down 

                if((mm==12?yy+1:yy)==outDate.getFullYear() && (mm==12?1:mm+1)== outDate.getMonth() + 1 && 
                meizzWDay[i]==outDate.getDate())
                {
                    da.borderColorLight="#FFFFFF";
                    da.borderColorDark="#63A3E9";
                }
            }
        }
        else        //This month's section 

        {
            da.innerHTML="<b>" + meizzWDay[i] + "</b>";
            da.title=mm +"Month " + meizzWDay[i] + "Day ";
            da.onclick=Function("meizzDayClick(this.innerText,0)");        //To give the OnClick event of the td processing 

            //If the currently selected date; otherwise, it displays a bright blue background; if this is the current date, display dark yellow background 
            if(!outDate)
                da.style.backgroundColor = (yy == new Date().getFullYear() && mm == new Date().getMonth()+1 && meizzWDay[i] == new Date().getDate())?
                    "#5CEFA0":"#f5f5f5";
            else
            {
                da.style.backgroundColor =(yy==outDate.getFullYear() && mm== outDate.getMonth() + 1 && meizzWDay[i]==outDate.getDate())?
                    "#84C1FF":((yy == new Date().getFullYear() && mm == new Date().getMonth()+1 && meizzWDay[i] == new Date().getDate())?
                    "#5CEFA0":"#f5f5f5");
                //Drag the selected date is displayed as concave down 

                if(yy==outDate.getFullYear() && mm== outDate.getMonth() + 1 && meizzWDay[i]==outDate.getDate())
                {
                    da.borderColorLight="#FFFFFF";
                    da.borderColorDark="#63A3E9";
                }
            }
        }
                da.style.cursor="hand"
            }
        else { da.innerHTML="";da.style.backgroundColor="";da.style.cursor="default"; }
    }
}

function meizzDayClick(n,ex)    //Click on the pick a date display box, enter the function main *************
{
    parent.meizzTheDate=n;
    var yy=meizzTheYear;
    var mm = parseInt(meizzTheMonth)+ex;    //exIndicates the offset that is used to select the last month and the date of the next month 
    var hh=meizzTheHour;
    var mi=meizzTheMinute;
    var se=meizzTheSecond;
    //Judgment of the month, and the corresponding processing 

    if(mm<1){
        yy--;
        mm=12+mm;
    }
    else if(mm>12){
        yy++;
        mm=mm-12;
    }

    if (mm < 10)    {mm = "0" + mm;}
    if (hh<10)        {hh="0" + hh;}    //When 
    if (mi<10)        {mi="0" + mi;}    //Division 
    if (se<10)        {se="0" + se;}    //Seconds 

    if (outObject)
    {
        if (!n) {    //outObject.value=""; 
            return;}
        if ( n < 10){n = "0" + n;}

        WriteDateTo(yy,mm,n,hh,mi,se);

        closeLayer(); 
        if (bUseTime)
        {
            try
            {
                outButton.click();
            }
            catch (e)
            {
                setday(outObject);
            }
        }
    }
    else {closeLayer(); alert("All you have to output control object does not exist! ");}
}

function format(n)    //Format numbers for a two-character representation 
{
    var m=new String();
    var tmp=new String(n);
    if (n<10 && tmp.length<2)
    {
        m="0"+n;
    }
    else
    {
        m=n;
    }
    return m;
}

function evaSetTime()        //Set the user to select the hour, minute 
{
    odatelayer.meizzHourHead.innerText=meizzTheHour+" When ";
    odatelayer.meizzMinuteHead.innerText=meizzTheMinute+" Division ";
    odatelayer.meizzSecondHead.innerText=meizzTheSecond+" Seconds ";
    WriteDateTo(meizzTheYear,meizzTheMonth,meizzTheDate,meizzTheHour,meizzTheMinute,meizzTheSecond)
}

function evaSetTimeNothing()    //Sets the time the control is empty 
{
    odatelayer.meizzHourHead.innerText="";
    odatelayer.meizzMinuteHead.innerText="";
    odatelayer.meizzSecondHead.innerText="";
    WriteDateTo(meizzTheYear,meizzTheMonth,meizzTheDate,meizzTheHour,meizzTheMinute,meizzTheSecond)
}

function evaSetTimeNow()    //Sets the time the control is the current time 
{
    odatelayer.meizzHourHead.innerText=new Date().getHours()+" When ";
    odatelayer.meizzMinuteHead.innerText=new Date().getMinutes()+" Division ";
    odatelayer.meizzSecondHead.innerText=new Date().getSeconds()+" Seconds ";
    meizzTheHour = new Date().getHours();
    meizzTheMinute = new Date().getMinutes();
    meizzTheSecond = new Date().getSeconds();
    WriteDateTo(meizzTheYear,meizzTheMonth,meizzTheDate,meizzTheHour,meizzTheMinute,meizzTheSecond)
}

function UseTime(ctl)
{
    bUseTime=!bUseTime;
    if (bUseTime)
    {
        bImgSwitch();
        ctl.innerHTML=bImg;
        evaSetTime();        //Display the time, the user's original selection 
        //evaSetTimeNow();    //Displays the current time 
    }
    else
    {
        bImgSwitch();
        ctl.innerHTML=bImg;
        evaSetTimeNothing();
    }
}

function WriteDateTo(yy,mm,n,hh,mi,se)
{
    if (bUseTime)
    {
        outObject.value= yy + "-" + format(mm) + "-" + format(n) + " " + format(hh) + ":" + format(mi) + ":" + format(se); //Note: Here you can output to your desired format 
    }
    else
    {
        outObject.value= yy + "-" + format(mm) + "-" + format(n); //Note: Here you can output to your desired format 
    }
}

function bImgSwitch()
{
    if (bUseTime)
    {
        bImg="Open ";
    }
    else
    {
        bImg="Shut down ";
    }
}


Page call
<input type="text" name="test" readonly=true>


Paragraph:

js script
//----------------------------------------------------------------------------
//  This is the plum blossom rain do a Javascript calendar page script controls for Microsoft IE 5. .0Above) browser 
//  The primary call the function setday is (this,[object])And setday (this), [object]Is the name of the control output controls, cite two examples: 
//  1. <input name=txt><input type=button value=setday>
//  2. <input>
//  If there be any deficiencies, or if you have a better suggestion, please contact me: mail : meizz@hzcnc.com
//  This calendar year limit is 1000 - 9999) 
//  Press ESC to close the control 
//  In the year and month are displayed when you click on a place out of the year and month respectively of the drop-down box. 
//  Click on the little outside any control to close the control 
/* Following is a description of the modify walkingpoison 
walkingpoisonContact us: wayx @kali.com.cn

Ver 2.0
Modification date: 2002 -12-13
Modify the content: 
1.*New modified use iframe as a calendar of the carrier, is no longer select and Flash, and other control block. 
2.Fixed a transplant to move calendar iframe. 

Ver 1.5
Modification date: 2002 -12-4
Modify the content: 
1.Select the date to appear as concave down style 
2.Modify the close layer approach allows loses focus to close the calendar. 
3.Modify keys handling so that the Tab switch focus can close control 
4.*You can customize the calendar that you can drag 

Ver 1.4
Modification date: 2002 -12-3
Modify the content: 
1.Fix selected years /Month drop-down box and press the ESC key result in years /The problem does not appear in the month of 
2.Fixed month using the drop-down box to select error (caused by the date string into a number of issues) 
3.*The appearance of the style of improvement, make the controls from the ugly duckling into a beautiful swan, from Cinderella into a noble Princess, from ... (readers can own appropriate metaphor) 
4.Once again increase the years /Click on the space of the month, and on the drop-down box position adjustments 

Note: *Numbers refer to the comparison of key changes 

Description: 
1.Subject to the limitations of iframe, if you drag the calendar window, the calendar will stop moving. 
*/

//==================================================== Parameter setting section =======================================================
var bMoveable=true;  //Set whether you can drag the calendar 
var _VersionInfo="Version:2.0&#13;2.0Author :walkingpoison&#13;1.0Author : F.R.Huang(meizz)&#13;MAIL: meizz@hzcnc.com" //Version information 

//==================================================== WEB The page display section =====================================================
var strFrame;  //Hold the calendar layers of HTML code 
document.writeln('<iframe"position: absolute; width: 144; height: 211; z-index: 9998; display: none"></iframe>');
strFrame='<style>';
strFrame+='INPUT.button{BORDER-RIGHT: #ff9900 1px solid;BORDER-TOP: #ff9900 1px solid;BORDER-LEFT: #ff9900 1px solid;';
strFrame+='BORDER-BOTTOM: #ff9900 1px solid;BACKGROUND-COLOR: #fff8ec;font-family:Tahoma ;}';
strFrame+='TD{FONT-SIZE: 9pt;font-family:Tahoma ;}';
strFrame+='</style>';
strFrame+='<scr' + 'ipt>';
strFrame+='var datelayerx,datelayery; /*Hold the calendar control mouse position */';
strFrame+='var bDrag; /*Mark whether to start drag */';
strFrame+='function document.onmousemove() /*In the mouse move event, if you begin to drag the calendar, the mobile calendar */';
strFrame+='{if(bDrag && window.event.button==1)';
strFrame+=' {var DateLayer=parent.document.all.meizzDateLayer.style;';
strFrame+='  DateLayer.posLeft += window.event.clientX-datelayerx;/*Because each move beyond the mouse position is restored to its original location, so different in wording and div */';
strFrame+='  DateLayer.posTop += window.event.clientY-datelayery;}}';
strFrame+='function DragStart()  /*Start dragging the calendar */';
strFrame+='{var DateLayer=parent.document.all.meizzDateLayer.style;';
strFrame+=' datelayerx=window.event.clientX;';
strFrame+=' datelayery=window.event.clientY;';
strFrame+=' bDrag=true;}';
strFrame+='function DragEnd(){  /*Drag the end of the calendar */';
strFrame+=' bDrag=false;}';
strFrame+='</scr' + 'ipt>';
strFrame+='<div onselectstart="return false"><span"z-index: 9999;position: absolute;top: 3; left: 19;display: none"></span>';
strFrame+='<span"z-index: 9999;position: absolute;top: 3; left: 78;display: none"></span>';
strFrame+='<table border=1 cellspacing=0 cellpadding=0 width=142 height=160 bordercolor=#ff9900 bgcolor=#ff9900 Author="wayx">';
strFrame+='  <tr Author="wayx"><td width=142 height=23 Author="wayx" bgcolor=#FFFFFF><table border=0 cellspacing=1 cellpadding=0 width=140 Author="wayx" height=23>';
strFrame+='      <tr align=center Author="wayx"><td width=16 align=center bgcolor=#ff9900 ';
strFrame+='        title="Forward 1 month " Author=meizz><b Author=meizz>&lt;</b>';
strFrame+='        </td><td width=60 align=center Author=meizz ';
strFrame+='onmouseover="style.backgroundColor=\'#FFD700\'""style.backgroundColor=\'white\'" ';
strFrame+='onclick="parent.tmpSelectYearInnerHTML(this.innerText.substring(0,4))" title="Click here to select the year "><span Author=meizz';
strFrame+='<td width=48 align=center Author=meizz"style.backgroundColor=\'#FFD700\'" ';
strFrame+='"style.backgroundColor=\'white\'"';
strFrame+='        title="Click here to select a month "><span';
strFrame+='        <td width=16 bgcolor=#ff9900 align=center ';
strFrame+='         title="Backward in 1 month " Author=meizz><b Author=meizz>&gt;</b></td></tr>';
strFrame+='    </table></td></tr>';
strFrame+='  <tr Author="wayx"><td width=142 height=18 Author="wayx">';
strFrame+='<table border=1 cellspacing=0 cellpadding=0 bgcolor=#ff9900 ' + (bMoveable? 'onmousedown="DragStart()" onmouseup="DragEnd()"':'');
strFrame+=' BORDERCOLORLIGHT=#FF9900 BORDERCOLORDARK=#FFFFFF width=140 height=20 Author="wayx">';
strFrame+='<tr Author="wayx" align=center valign=bottom><td Author=meizz>Day </td>';
strFrame+='<td Author=meizz>A </td><td Author=meizz>2. </td>';
strFrame+='<td Author=meizz>Three </td><td Author=meizz>Four </td>';
strFrame+='<td Author=meizz>Five </td><td Author=meizz>Six </td></tr>';
strFrame+='</table></td></tr><!-- Author:F.R.Huang(meizz) http://www.meizz.com/ mail: meizz@hzcnc.com 2002-10-8 -->';
strFrame+='  <tr Author="wayx"><td width=142 height=120 Author="wayx">';
strFrame+='    <table border=1 cellspacing=2 cellpadding=0 BORDERCOLORLIGHT=#FF9900 BORDERCOLORDARK=#FFFFFF bgcolor=#fff8ec width=140 height=120 Author="wayx">';
var n=0; for (j=0;j<5;j++){ strFrame+= ' <tr align=center Author="wayx">'; for (i=0;i<7;i++){
strFrame+='<td width=20 height=20'+n+' Author=meizz';n++;}
strFrame+='</tr>';}
strFrame+='      <tr align=center Author="wayx">';
for (i=35;i<39;i++)strFrame+='<td width=20 height=20'+i+' Author=wayx></td>';
strFrame+='        <td colspan=3 align=right Author=meizz><span';
strFrame+='         Author=meizz title="' + _VersionInfo + '"><u>Shut down </u></span>&nbsp;</td></tr>';
strFrame+='    </table></td></tr><tr Author="wayx"><td Author="wayx">';
strFrame+='        <table border=0 cellspacing=1 cellpadding=0 width=100% Author="wayx" bgcolor=#FFFFFF>';
strFrame+='          <tr Author="wayx"><td Author=meizz align=left><input Author=meizz type=button"<<" title="Flip forward one year " ';
strFrame+='            ><input Author=meizz"Forward 1 month " type=button ';
strFrame+='             value="< "></td><td ';
strFrame+='             Author=meizz align=center><input Author=meizz type=button"parent.meizzToday()" ';
strFrame+='             title="Current date "></td><td ';
strFrame+='             Author=meizz align=right><input Author=meizz type=button" >" ';
strFrame+='             title="Backward in 1 month ""font-size: 12px; height: 20px"><input ';
strFrame+='             Author=meizz type=button">>" title="Backward in 1 year "';
strFrame+='            ></td>';
strFrame+='</tr></table></td></tr></table></div>';

window.frames.meizzDateLayer.document.writeln(strFrame);
window.frames.meizzDateLayer.document.close();  //Fix ie progress bar does not end the problem 

//==================================================== WEB The page display section ======================================================
var outObject;
var outButton;  //Click on the button 
var outDate="";  //The date deposited objects 
var odatelayer=window.frames.meizzDateLayer.document.all;  //Hold the calendar object 
function setday(tt,obj) //The main transfer function 
{
 if (arguments.length >  2){alert("I'm sorry! the incoming parameters of this control too much. ");return;}
 if (arguments.length == 0){alert("Sorry, you do not have any arguments for this control is passed back! ");return;}
 var dads  = document.all.meizzDateLayer.style;
 var th = tt;
 var ttop  = tt.offsetTop;     //TTThe control's anchor high 
 var thei  = tt.clientHeight;  //TTThe control's own high 
 var tleft = tt.offsetLeft;    //TTThe anchor for the width control 
 var ttyp  = tt.type;          //TTThe type of the control 
 while (tt = tt.offsetParent){ttop+=tt.offsetTop; tleft+=tt.offsetLeft;}
 dads.top  = (ttyp=="image")? ttop+thei : ttop+thei+6;
 dads.left = tleft;
 outObject = (arguments.length == 1) ? th : obj;
 outButton = (arguments.length == 1) ? null : th; //Set the button tapping 
 //According to the current input box of the date display calendar year 
 var reg = /^(\d+)-(\d{1,2})-(\d{1,2})$/; 
 var r = outObject.value.match(reg); 
 if(r!=null){
  r[2]=r[2]-1; 
  var d= new Date(r[1], r[2],r[3]); 
  if(d.getFullYear()==r[1] && d.getMonth()==r[2] && d.getDate()==r[3]){
   outDate=d;  //Save the date for the external incoming 
  }
  else outDate="";
   meizzSetDay(r[1],r[2]+1);
 }
 else{
  outDate="";
  meizzSetDay(new Date().getFullYear(), new Date().getMonth() + 1);
 }
 dads.display = '';

 event.returnValue=false;
}

var MonHead = new Array(12);         //Define each month in the Gregorian calendar days 
    MonHead[0] = 31; MonHead[1] = 28; MonHead[2] = 31; MonHead[3] = 30; MonHead[4]  = 31; MonHead[5]  = 30;
    MonHead[6] = 31; MonHead[7] = 31; MonHead[8] = 30; MonHead[9] = 31; MonHead[10] = 30; MonHead[11] = 31;

var meizzTheYear=new Date().getFullYear(); //Define the variable's initial value 
var meizzTheMonth=new Date().getMonth()+1; //Define the variable's initial value for the month 
var meizzWDay=new Array(39);               //Define an array of dates 

function document.onclick() //When you click anywhere to close the control //ie6Can you switch focus from the following processing instead 
{ 
  with(window.event)
  { if (srcElement.getAttribute("Author")==null && srcElement != outObject && srcElement != outButton)
    closeLayer();
  }
}

function document.onkeyup()  //Press the ESC key to close, switch the focus off 
  {
    if (window.event.keyCode==27){
  if(outObject)outObject.blur();
  closeLayer();
 }
 else if(document.activeElement)
  if(document.activeElement.getAttribute("Author")==null && document.activeElement != outObject && document.activeElement != outButton)
  {
   closeLayer();
  }
  }

function meizzWriteHead(yy,mm)  //Write to the head of the current year and month 
  {
 odatelayer.meizzYearHead.innerText  = yy + " Year ";
    odatelayer.meizzMonthHead.innerText = mm + " Month ";
  }

function tmpSelectYearInnerHTML(strYear) //The year of the drop-down box. 
{
  if (strYear.match(/\D/)!=null){alert("Year input parameter is not a number! ");return;}
  var m = (strYear) ? strYear : new Date().getFullYear();
  if (m < 1000 || m > 9999) {alert("The year value in the 1000 to 9999! ");return;}
  var n = m - 10;
  if (n < 1000) n = 1000;
  if (n + 26 > 9999) n = 9974;
  var s = "<select Author=meizz name=tmpSelectYear "
     s += "onblur='document.all.tmpSelectYearLayer.style.display=\"none\"' "
     s += "onchange='document.all.tmpSelectYearLayer.style.display=\"none\";"
     s += "parent.meizzTheYear = this.value; parent.meizzSetDay(parent.meizzTheYear,parent.meizzTheMonth)'>\r\n";
  var selectInnerHTML = s;
  for (var i = n; i < n + 26; i++)
  {
    if (i == m)
       {selectInnerHTML += "<option Author=wayx value='" + i + "' selected>" + i + "Year " + "</option>\r\n";}
    else {selectInnerHTML += "<option Author=wayx value='" + i + "'>" + i + "Year " + "</option>\r\n";}
  }
  selectInnerHTML += "</select>";
  odatelayer.tmpSelectYearLayer.style.display="";
  odatelayer.tmpSelectYearLayer.innerHTML = selectInnerHTML;
  odatelayer.tmpSelectYear.focus();
}

function tmpSelectMonthInnerHTML(strMonth) //The drop-down box of the month 
{
  if (strMonth.match(/\D/)!=null){alert("Month input parameter is not a number! ");return;}
  var m = (strMonth) ? strMonth : new Date().getMonth() + 1;
  var s = "<select Author=meizz name=tmpSelectMonth "
     s += "onblur='document.all.tmpSelectMonthLayer.style.display=\"none\"' "
     s += "onchange='document.all.tmpSelectMonthLayer.style.display=\"none\";"
     s += "parent.meizzTheMonth = this.value; parent.meizzSetDay(parent.meizzTheYear,parent.meizzTheMonth)'>\r\n";
  var selectInnerHTML = s;
  for (var i = 1; i < 13; i++)
  {
    if (i == m)
       {selectInnerHTML += "<option Author=wayx value='"+i+"' selected>"+i+"Month "+"</option>\r\n";}
    else {selectInnerHTML += "<option Author=wayx value='"+i+"'>"+i+"Month "+"</option>\r\n";}
  }
  selectInnerHTML += "</select>";
  odatelayer.tmpSelectMonthLayer.style.display="";
  odatelayer.tmpSelectMonthLayer.innerHTML = selectInnerHTML;
  odatelayer.tmpSelectMonth.focus();
}

function closeLayer()               //This layer of close 
  {
    document.all.meizzDateLayer.style.display="none";
  }

function IsPinYear(year)            //In determining whether a flat year leap 
  {
    if (0==year%4&&((year%100!=0)||(year%400==0))) return true;else return false;
  }

function GetMonthCount(year,month)  //Leap year day, February 29 
  {
    var c=MonHead[month-1];if((month==2)&&IsPinYear(year)) c++;return c;
  }
function GetDOW(day,month,year)     //For one day of the week 
  {
    var dt=new Date(year,month-1,day).getDay()/7; return dt;
  }

function meizzPrevY()  //To turn the Year 
  {
    if(meizzTheYear > 999 && meizzTheYear <10000){meizzTheYear--;}
    else{alert("The year is out of range (1000 -9999)! ");}
    meizzSetDay(meizzTheYear,meizzTheMonth);
  }
function meizzNextY()  //Over the next Year 
  {
    if(meizzTheYear > 999 && meizzTheYear <10000){meizzTheYear++;}
    else{alert("The year is out of range (1000 -9999)! ");}
    meizzSetDay(meizzTheYear,meizzTheMonth);
  }
function meizzToday()  //Today Button
  {
 var today;
    meizzTheYear = new Date().getFullYear();
    meizzTheMonth = new Date().getMonth()+1;
    today=new Date().getDate();
    //meizzSetDay(meizzTheYear,meizzTheMonth);
    if(outObject){
  outObject.value=meizzTheYear + "-" + meizzTheMonth + "-" + today;
    }
    closeLayer();
  }
function meizzPrevM()  //To turn the month 
  {
    if(meizzTheMonth>1){meizzTheMonth--}else{meizzTheYear--;meizzTheMonth=12;}
    meizzSetDay(meizzTheYear,meizzTheMonth);
  }
function meizzNextM()  //Over the next month 
  {
    if(meizzTheMonth==12){meizzTheYear++;meizzTheMonth=1}else{meizzTheMonth++}
    meizzSetDay(meizzTheYear,meizzTheMonth);
  }

function meizzSetDay(yy,mm)   //Major writers **********
{
  meizzWriteHead(yy,mm);
  //Sets the current month's public variables as the values passed 
  meizzTheYear=yy;
  meizzTheMonth=mm;
  
  for (var i = 0; i < 39; i++){meizzWDay[i]=""};  //Displays the contents of the box clear all 
  var day1 = 1,day2=1,firstday = new Date(yy,mm-1,1).getDay();  //A month on the first day of the week 
  for (i=0;i<firstday;i++)meizzWDay[i]=GetMonthCount(mm==1?yy-1:yy,mm==1?12:mm-1)-firstday+i+1 //Last month's last days 
  for (i = firstday; day1 < GetMonthCount(yy,mm)+1; i++){meizzWDay[i]=day1;day1++;}
  for (i=firstday+GetMonthCount(yy,mm);i<39;i++){meizzWDay[i]=day2;day2++}
  for (i = 0; i < 39; i++)
  { var da = eval("odatelayer.meizzDay"+i)     //Writing new dates a month arranged week 
    if (meizzWDay[i]!="")
      { 
  //Initialize the border 
  da.borderColorLight="#FF9900";
  da.borderColorDark="#FFFFFF";
  if(i<firstday)  //Last month's section 
  {
   da.innerHTML="<b><font color=gray>" + meizzWDay[i] + "</font></b>";
   da.title=(mm==1?12:mm-1) +"Month " + meizzWDay[i] + "Day ";
   da.onclick=Function("meizzDayClick(this.innerText,-1)");
   if(!outDate)
    da.style.backgroundColor = ((mm==1?yy-1:yy) == new Date().getFullYear() && 
     (mm==1?12:mm-1) == new Date().getMonth()+1 && meizzWDay[i] == new Date().getDate()) ?
      "#FFD700":"#e0e0e0";
   else
   {
    da.style.backgroundColor =((mm==1?yy-1:yy)==outDate.getFullYear() && (mm==1?12:mm-1)== outDate.getMonth() + 1 && 
    meizzWDay[i]==outDate.getDate())? "#00ffff" :
    (((mm==1?yy-1:yy) == new Date().getFullYear() && (mm==1?12:mm-1) == new Date().getMonth()+1 && 
    meizzWDay[i] == new Date().getDate()) ? "#FFD700":"#e0e0e0");
    //Drag the selected date is displayed as concave down 
    if((mm==1?yy-1:yy)==outDate.getFullYear() && (mm==1?12:mm-1)== outDate.getMonth() + 1 && 
    meizzWDay[i]==outDate.getDate())
    {
     da.borderColorLight="#FFFFFF";
     da.borderColorDark="#FF9900";
    }
   }
  }
  else if (i>=firstday+GetMonthCount(yy,mm))  //Part of the next month 
  {
   da.innerHTML="<b><font color=gray>" + meizzWDay[i] + "</font></b>";
   da.title=(mm==12?1:mm+1) +"Month " + meizzWDay[i] + "Day ";
   da.onclick=Function("meizzDayClick(this.innerText,1)");
   if(!outDate)
    da.style.backgroundColor = ((mm==12?yy+1:yy) == new Date().getFullYear() && 
     (mm==12?1:mm+1) == new Date().getMonth()+1 && meizzWDay[i] == new Date().getDate()) ?
      "#FFD700":"#e0e0e0";
   else
   {
    da.style.backgroundColor =((mm==12?yy+1:yy)==outDate.getFullYear() && (mm==12?1:mm+1)== outDate.getMonth() + 1 && 
    meizzWDay[i]==outDate.getDate())? "#00ffff" :
    (((mm==12?yy+1:yy) == new Date().getFullYear() && (mm==12?1:mm+1) == new Date().getMonth()+1 && 
    meizzWDay[i] == new Date().getDate()) ? "#FFD700":"#e0e0e0");
    //Drag the selected date is displayed as concave down 
    if((mm==12?yy+1:yy)==outDate.getFullYear() && (mm==12?1:mm+1)== outDate.getMonth() + 1 && 
    meizzWDay[i]==outDate.getDate())
    {
     da.borderColorLight="#FFFFFF";
     da.borderColorDark="#FF9900";
    }
   }
  }
  else  //This month's section 
  {
   da.innerHTML="<b>" + meizzWDay[i] + "</b>";
   da.title=mm +"Month " + meizzWDay[i] + "Day ";
   da.onclick=Function("meizzDayClick(this.innerText,0)");  //To give the OnClick event of the td processing 
   //If the currently selected date; otherwise, it displays a bright blue background; if this is the current date, display dark yellow background 
   if(!outDate)
    da.style.backgroundColor = (yy == new Date().getFullYear() && mm == new Date().getMonth()+1 && meizzWDay[i] == new Date().getDate())?
     "#FFD700":"#e0e0e0";
   else
   {
    da.style.backgroundColor =(yy==outDate.getFullYear() && mm== outDate.getMonth() + 1 && meizzWDay[i]==outDate.getDate())?
     "#00ffff":((yy == new Date().getFullYear() && mm == new Date().getMonth()+1 && meizzWDay[i] == new Date().getDate())?
     "#FFD700":"#e0e0e0");
    //Drag the selected date is displayed as concave down 
    if(yy==outDate.getFullYear() && mm== outDate.getMonth() + 1 && meizzWDay[i]==outDate.getDate())
    {
     da.borderColorLight="#FFFFFF";
     da.borderColorDark="#FF9900";
    }
   }
  }
        da.style.cursor="hand"
      }
    else{da.innerHTML="";da.style.backgroundColor="";da.style.cursor="default"}
  }
}

function meizzDayClick(n,ex)  //Click on the pick a date display box, enter the function main *************
{
  var yy=meizzTheYear;
  var mm = parseInt(meizzTheMonth)+ex; //exIndicates the offset that is used to select the last month and the date of the next month 
 //Judgment of the month, and the corresponding processing 
 if(mm<1){
  yy--;
  mm=12+mm;
 }
 else if(mm>12){
  yy++;
  mm=mm-12;
 }
 
  if (mm < 10){mm = "0" + mm;}
  if (outObject)
  {
    if (!n) {//outObject.value=""; 
      return;}
    if ( n < 10){n = "0" + n;}
    outObject.value= yy + "-" + mm + "-" + n ; //Note: Here you can output to your desired format 
    closeLayer(); 
  }
  else {closeLayer(); alert("All you have to output control object does not exist! ");}
}


Page call
<input type="text" name="info_date1" size="20" value=""
  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • YahooMyWeb

Related Posts of Several good js calendar

  • hibernate call stored procedure

    hibernate call stored procedure

  • hibernate using c3p0 connection pooling

    Private http://www.lifevv.com/tenyo/doc/20070605102040991.html c3p0 for open source's JDBC connection pool, with the release hibernate. This article describes how to use the hibernate configuration in c3p0. c3p0 connection pool configuration is v ...

  • Hibernate configuration parameters hibernate.hbm2ddl.auto

    Hibernate in the configuration file: <properties> <property name="hibernate.hbm2ddl.auto" value="create" /> </ properties> Parameter Description: validate load hibernate, the authentication to create a database t ...

  • Build flex + spring + blazeds + hibernate application

    Build flex + spring + blazeds + hibernate application First, set up the project blazeds 1, will blazeds.war extract to a directory, such as: myflex /; 2, set up java works were such as: MyFlex, in the orientation of selection create project from exis ...

  • Hibernate connection pool configuration

    Hibernate connection pool configuration <! - Jdbc -> <property name="connection.driver_class"> oracle.jdbc.driver.OracleDriver </ property> <property name="connection.url"> jdbc: oracle: thin: @ 10.203.14.132:15

  • hibernate generic generic DAO

    package org.lzpeng.dao; import java.io.Serializable; import java.util.List; import org.hibernate.Criteria; import org.hibernate.Query; import org.hibernate.criterion.Criterion; import org.springside.modules.orm.hibernate.Page; /** * * @version 2009-1-10 *

  • First Hibernate Example

    Curd a simple example. Source does not contain the dependent libraries, or playing too much of the package. PO object Note: One must have the default constructor 2 non-final modified. Otherwise useless lazy loading. UserDAOImpl category code, and other co

  • Struts2 + hibernate + spring problem user log in

    dao layer services layer action jsp <tr> <td align="center"> <b> user name: </ b> </ td> <td> <s: textfield name = "czyNumber" cssClass = "textstyle" theme = "simple" size = &q

  • Hibernate secondary cache

    Hibernate cache: 2-bit cache, also known as process-level cache or SessionFactory level cache, secondary cache can be shared by all of the session Cache configuration and the use of: Will echcache.xml (the document code in hibernate package directory ...

  • Hibernate's lazy strategy

    hibernate Lazy strategy can be used in: <class> tag, it can be true / false Tags can <PROPERTY> values true / false type of necessary tools to enhance <set> <list> can tag values true / false / extra <many-to-one> <on ...

blog comments powered by Disqus
Recent
Recent Entries
Tag Cloud
Random Entries