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=""
分类:AJAX 时间:2009-03-11 人气:667
分享到:
blog comments powered by Disqus

相关文章

  • bboss mvc framework, the controller using the method specified comment date format date example of the type parameter 2011-05-04

    bboss mvc framework, the controller using the method specified comment date format date example of the type parameters directly into the subject: 1. Controller method definition-DateConvertController /* * Copyright 2008 biaoping.yin * * Licensed unde

  • To convert the date string format to match the date of the database type 2010-04-18

    /** * From a Web page or external input ( Generally not enter seconds ), Need to set the date into a date type database */ public final static java.sql.Timestamp strToDateTime(String dateStr) throws Exception { int len = dateStr.length(); String form

  • Flex in the style of how to set the ComboBox dropdownStyleName and verticalScrollBarStyleName vertical scroll bar up and down icons style examples 2010-09-10

    The following example shows how Flex and verticalScrollBarStyleName by dropdownStyleName style, set the vertical scroll bar up and down ComboBox style icon. Let us first look at the Demo (you can right-click here to View Source or View Source): The f

  • File Upload button to change the input button style 2010-06-22

    <style type="text/css"> div.fileinputs ( position: relative; ) div.fakefile ( position: absolute; top: 0px; left: 0px; z-index: 1; border: 1px solid red; ) input.file ( position: relative; text-align: right; -Moz-opacity: 0; filter: alpha

  • CSS-inline - Internal - external style sheet 2011-01-13

    A CSS (Cascading Style Sheets) Cascading style sheets, role: Decorative HTML Second, CSS syntax is made of three parts: selector, property, value. Three Three ways to HTML CSS Reference (The following is the sample code) HTML CODE <!DOCTYP> <HTML

  • A large number of examples of JavaScript 2011-05-15

    Hehe. Nothing today. Is to write a lot of cases, Leia. . . On the web to. Their results also pleased. . . Now give us appreciate There is how to box model that IE supports DOM. . . Just add a <! DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Tra

  • 基于jQuery的模仿新浪微博时间的组件 2015-04-11

    废话不多说,实现原理主要是处理table,生成tr td,其中最重要的是如何找出每月第一天是星期几,然后就能对应出这个月的余下天数. 首先,说下有些人说这是重复造轮子,但我觉得不是,做项目,总不能老是拿别人的东西来吧,拿来主义并不是神马好玩意,当然如果你想轻松,也没话说,至少说我自己做得,我改起来或者扩展比较方便 效果以及代码如下,,预览效果自己放在html里面把,搞在这个页面上麻烦得很 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi

  • Firebug Guide (four) --- how to use the Firebug command line API to provide debugging js procedures (below) 2009-03-18

    Introduction: Firebug command line are in one of the most useful features. If you have been using Visual Studio (referred to as VS) the experience of development projects, they should know you in the use of VS debugging procedures, "the immediate win

  • Insert / Delete table row 2009-12-22

    1, insert the line <script type="text/javascript"> function insRow(){ var x = document.getElementById('myTable').insertRow(0) var y = x.insertCell(0) var z = x.insertCell(1) y.innerHTML = "NEW CELL1" z.innerHTML = "NEW CELL2

iOS 开发

Android 开发

Python 开发

JAVA 开发

开发语言

PHP 开发

Ruby 开发

搜索

前端开发

数据库

开发工具

开放平台

Javascript 开发

.NET 开发

云计算

服务器

Copyright (C) codeweblog.com, All Rights Reserved.

CodeWeblog.com 版权所有 黔ICP备15002463号-1

processed in 0.471 (s). 13 q(s)