Simple JS calendar control instance code

The running result is as follows:

Copy codeThe Code is 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 (); // the day of the week on 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 ('Choose _ date_czw_close ') \ "> close </span> | <span style = 'cursor: pointer; 'onclick = \" choose_date_czw ('"+ date_id +"', 'Choose _ date_czw_empty ') \ "> clear </span> ";
// October, (), and never worse;, and ).
Var m_days = new Array (+ is_leap (ynow), 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> 1 </td> <td> 2 </td> <td> 3 </td> <td> 4 </td> <td> 5 </td> <td> 6 </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 ++) {// The inner layer for statement-td tag
Idx = I * 7 + k; // The natural sequence number of the table unit.
Date_str = idx-firstday + 1; // calculate the 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 = '# fff' \ "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 = '# fff' \ "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')"/>