JavaScript-implemented date control specific code _javascript tips

Copy Code code as follows:

<style>
<!--
. wr{font-size:12pt line-height:22px}
. wr1 {font-size:12px; line-height:200%}
. wr2 {font-size:14px; line-height:200%}
. WR3 {font-size:12px}
. wr4 {font-size:12px; line-height:150%}
-->
</style>

<title> Date Automatic input control </title>
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">

<style type= "Text/css" >
. date-picker-wp {
Display:none;
Position:absolute;
Background: #f1f1f1;
left:40px;
top:40px;
BORDER-TOP:4PX solid #3879d9;
}
. date-picker-wp Table {
border:1px solid #ddd;
}
. DATE-PICKER-WP TD {
Background: #fafafa;
width:22px;
height:18px;
border:1px solid #ccc;
font-size:12px;
Text-align:center;
}
. DATE-PICKER-WP Td.noborder {
Border:none;
Background:none;
}
. date-picker-wp TD A {
Color: #1c93c4;
Text-decoration:none;
}
. Strong {Font-weight:bold}
. hand {cursor:pointer; color: #3879d9}
</style>

<script type= "Text/javascript" >
var datepicker = function () {
var $ = function (i)
{
return document.getElementById (i)
},
addevent = function (o, E, f) {O.addeventlistener? O.addeventlistener (E, F, false): O.attachevent (' on ' +e, function () {F.C All (O)})},
GetPos = function (EL) {
for (var pos = {x:0, y:0}; el; el = el.offsetparent) {
Pos.x + = El.offsetleft;
Pos.y + = El.offsettop;
}
return POS;
};
var init = function (n, config) {
Window[n] = this;
DATE.PROTOTYPE._FD = function () {var d = new Date (this), D.setdate (1), Return D.getday ()};
Date.prototype._fc = function () {var D1 = new Date (this), D2 = new Date (this); D1.setdate (1); d2.setdate (1); D2.setmonth ( D2.getmonth () +1); Return (D2-D1)/86400000;};
THIS.N = n;
this.config = config;
This. D = new Date;
This.el = $ (Config.inputid);
This.el.title = this.n+ ' DatePicker ';
This.update ();
This.bind ();
};
Init.prototype = {
Update:function (Y, m) {
var con = [], week = [' Su ', ' Mo ', ' Tu ', ' We ', ' Th ', ' Fr ', ' Sa '], D = this. D, _this = this;
fn = function (A, b) {return ' <td title= ' ' +_this.n+ ' datepicker ' class= ' noborder hand ' onclick= ' ' +_this.n+ '. Update (' +a + ') ' > ' +b+ ' </td> '},
_html = ' <table cellpadding=0 cellspacing=2> ';
Y && d.setyear (d.getfullyear () + y);
M && D.setmonth (D.getmonth () + M);
var year = D.getfullyear (), month = D.getmonth () + 1, date = D.getdate ();
for (var i=0 i<week.length; i++) con.push (' <td title= ' ' +this.n+ ' datepicker ' "class= ')" Noborder "> ' +week[i]+ ' </td> ');
for (var i=0; i<d._fd (); i++) Con.push (' <td title= ' ' +this.n+ ' DatePicker "class= ');" Noborder "> </td>");
for (Var i=0 i<d._fc (); i++) Con.push (' <td class= "Hand" onclick= "' +this.n+ '. Fillinput (' +year+ ', ' +month+ ', ') ' + (i+ 1) + ' > ' + (i+1) + ' </td> ');
var toend = con.length%7;
if (toend!= 0) for (var i=0; i<7-toend; i++) Con.push (' <td class= ' noborder ' > </td> ');
_html + = ' <tr> ' +fn ("-1, null", "<<") +FN ("NULL,-1", "<") + ' <td title= ' ' +this.n+ ' DatePicker ' colspan=3 Class= "Strong" > ' +year+ '/' +month+ '/' +date+ ' </td> ' +FN ("null, 1", ">") +fn ("1, null", ">>") + ' </tr > ';
for (var i=0 i<con.length; i++) _html = = (i==0? ' <tr> ': i%7==0? ' </tr><tr> ': ' + con[i] + (i = = con.length-1? ' </tr> ': ');
!! This.box? This.box.innerHTML = _html:this.createbox (_html);
},
Fillinput:function (Y, M, d) {
var s = This.config.seprator | | '/';
This.el.value = y + S + m + S + D;
This.box.style.display = ' None ';
},
Show:function () {
var s = this.box.style, is = This.mask.style;
S[' Left '] = is[' left ' = GetPos (This.el). x + ' px ';
s[' top '] = is[' top ' = GetPos (this.el). Y + this.el.offsetHeight + ' px ';
s[' Display '] = is[' Display ' = ' block ';
is[' width ' = this.box.offsetwidth-2 + ' px ';
is[' height '] = this.box.offsetheight-2 + ' px ';
},
Hide:function () {
This.box.style.display = ' None ';
This.mask.style.display = ' None ';
},
Bind:function () {
var _this = this;
Addevent (document, ' click ', Function (e) {
E = e | | window.event;
var t = E.target | | E.srcelement;
if (t.title!= _this.n+ ' DatePicker ') {_this.hide ()} else {_this.show ()}
});
},
Createbox:function (HTML) {
var box = This.box = document.createelement (' div '), mask = This.mask = document.createelement (' iframe ');
Box.classname = This.config.className | | ' DatePicker ';
MASK.SRC = ' Javascript:false ';
Mask.frameborder = 0;
Box.style.cssText = ' position:absolute;display:none;z-index:9999 ';
Mask.style.cssText = ' position:absolute;display:none;z-index:9998 ';
Box.title = this.n+ ' DatePicker ';
box.innerhtml = html;
Document.body.appendChild (box);
Document.body.appendChild (mask);
return box;
}
};
Return init;
}();
onload = function () {
New DatePicker (' _datepicker_demo ', {
inputID: ' Date-input ',
ClassName: ' Date-picker-wp ',
Seprator: '-'
});
}
</script>

<body bgcolor= "#FFFFDB" text= "#000000" leftmargin= "0" topmargin= "0" marginwidth= "0" marginheight= "0" >
<form >

<table border= "0" width= "60%" align= "Center" >

<tr>
&LT;TD width= "45%" class= "WR4" align= "right" > Birthday:</td>
&LT;TD width= "55%" class= "WR4" >
<input type= "text" name= "Mtime" id= "Date-input" > <font color= "RED" >*</font>
</td>

</tr>

<tr>
&LT;TD width= "45%" align= "right" ><input type = "submit" value = "OK"/></td>
&LT;TD width= "55%" ><input type = "reset" value = "Reset"/></td>
</tr>
</table>

</form>
</body>

HTML page in the order of the JS execution:
1 The first execution within the head tag
2 execution within the body tag
3 when the body tag added the onload event corresponding to the JS final implementation, that is, when the page is loaded after the implementation

Note: When in the body tag added onload event in the head tag, the referenced outside JS does not work, when replaced by the body inside or