Simple JS Calendar Control code

This article introduces a simple JS Calendar control of all the code, the need for friends can refer to

The results of the operation are as follows:

Copy Code code as follows:

<script type= "Text/javascript" language= "JavaScript" >


function CHOOSE_DATE_CZW (DATE_ID,OBJTD) {


if (date_id== "Choose_date_czw_close") {


document.getelementbyidx_x_x ("choose_date_czw_id"). style.display= "None";


return;


}


if (objtd!=undefined) {


if (objtd== "Choose_date_czw_empty") {


document.getelementbyidx_x_x (date_id). value= "";


}else{


var year1 = document.getelementbyidx_x_x ("Choose_date_czw_year"). Value;


var month1 = document.getelementbyidx_x_x ("Choose_date_czw_month"). Value;


document.getelementbyidx_x_x (date_id). value=year1+ "-+month1+"-"+objtd.innerhtml;


    }


document.getelementbyidx_x_x ("choose_date_czw_id"). style.display= "None";


return;


}


var nstr=new Date (); Current


if (document.getelementbyidx_x_x ("Choose_date_czw_year")!=null) {


var year = document.getelementbyidx_x_x ("Choose_date_czw_year"). Value;


var month = document.getelementbyidx_x_x ("Choose_date_czw_month"). Value;


var str=year+ "/" +month+ "/1";


nstr=new Date (str); Current


}


var ynow=nstr.getfullyear (); Year


var mnow=nstr.getmonth (); Month


var dnow=nstr.getdate (); Today's date


var n1str=new Date (ynow,mnow,1); The first day of the month


var firstday=n1str.getday (); How many
the first day of the month

function Is_leap (year) {


return (year0==0 res= (year@0==0 1:0): res= (year%4==0? 1:0));


}


var dstr= "<select id=" Choose_date_czw_year "onchange=" CHOOSE_DATE_CZW (' "+date_id+") ">";


for (Var y=1901;y<2050;y++) {


if (y==ynow) {


dstr+= "<option value=" "+y+" "selected>" +y+ "</option>"


}else{


dstr+= "<option value= '" +y+ "' >" +y+ "</option>"


    }


}


dstr+= "</select> <select id=" Choose_date_czw_month "onchange=" CHOOSE_DATE_CZW (' "+date_id+") ">";


for (Var m=1;m<13;m++) {


if (parseint (mnow+1) ==m) {


dstr+= "<option value=" "+m+" "selected>" +m+ "</option>"


}else{


dstr+= "<option value= '" +m+ "' >" +m+ "</option>"


    }


}


dstr+= "</select> <span style= ' Cursor:pointer" onclick= (' CHOOSE_DATE_CZW ') " > Close </span& gt;|<span style= ' cursor:pointer ' onclick= ' choose_date_czw (' +date_id+ ' ', ' CHOOSE_DATE_CZW _empty ') "> Empty </span>";


//135,780 Wax (December), 31st never bad, 469 winter (November) 30th, only Hile 28 (leap year 29).


var m_days = new Array (31,28+is_leap (Ynow), 31,30,31,30,31,31,30,31,30,31);


var Tr_str=math.ceil ((M_days[mnow] + firstday)/7);


dstr+= "<table border= ' 0 ' cellpadding= ' 5 ' cellspacing= ' 0 ' ><tr><td> day </td><td> One </td& gt;<td> two </td><td> three </td><td> four </td><td> five </TD><TD > Six </td></tr> ";


var dqdate=new Date (); Current


for (i=0;i<tr_str;i++) {//outer for statement-TR tag


dstr+= "<tr>";


for (k=0;k<7;k++) {//inner for statement-TD tag


idx=i*7+k; The natural serial number of the table cell


date_str=idx-firstday+1; Calculated Date


if (date_str<=0 | | date_str>m_days[mnow]) {


dstr+= "<td> </td>";


}else{


if (Ynow==dqdate.getfullyear () && mnow==dqdate.getmonth () && dqdate.getdate () ==date_str) {


dstr+= "<td onmouseover=" this.style.backgroundcolor= ' #6FF ' onmouseout= ' this.style.backgroundcolor= ' #f FF ' "onclick=" CHOOSE_DATE_CZW (' +date_id+ "', this ')" style= ' Cursor:pointer; " Background-color: #6FF; ' > "+date_str+" </td>;


}else{


dstr+= "<td onmouseover=" this.style.backgroundcolor= ' #6FF ' onmouseout= ' this.style.backgroundcolor= ' #f FF ' "onclick=" CHOOSE_DATE_CZW (' +date_id+ "', this ')" style= ' Cursor:pointer; ' > "+date_str+" </td>;


        }


     }


   }


dstr+= "</tr>";


}


dstr+= "</table>";


if (document.getelementbyidx_x_x ("choose_date_czw_id") ==null) {


var obj = document.getelementbyidx_x_x (date_id);


var odiv = document_createelement_x_x ("div");


odiv.id= "choose_date_czw_id";


Odiv.innerhtml=dstr;


odiv.style.position= "Absolute";


odiv.style.border= "1px #0CF solid";


odiv.style.fontsize= "12px";


odiv.style.zindex=99999;


odiv.style.top=obj.offsettop+obj.offsetheight+ "px";


odiv.style.left=obj.offsetleft+ "px";


document.body.a (ODIV);


}else{


document.getelementbyidx_x_x ("choose_date_czw_id"). style.display= "Block";


document.getelementbyidx_x_x ("choose_date_czw_id"). Innerhtml=dstr;


}


}


</script>


<input type= "text" id= "add_date" onclick= "CHOOSE_DATE_CZW (' add_date ')"/>