Of Stack

JavaScript implementation of the date control specific code

  • 2020-03-29 23:47:48
  • OfStack 


<html> 
<head> 
<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> Automatic date entry control </title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
</head> 

<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.call(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> 
     <td width="45%" class="wr4" align="right">  Birthday: </td> 
     <td width="55%" class="wr4"> 
         <input type="text" name="mtime" id="date-input">  <font color="RED">*</font>         
     </td> 

   </tr> 

  <tr>  
     <td width="45%" align="right"><input type = "submit" value = " determine "/></td>  
     <td width="55%"><input type = "reset" value = " reset "/></td>  
  </tr> 
</table> 

</form> 
</body> 
</html>

Js execution order in HTML page:
1) execute first in the head tag
2) execution within the body tag
3) when onload& cake is added to the body tag; The corresponding js is executed at the end of the event, that is, when the page is loaded

Note: onload  is added to the body tag; Event in the head tag, the reference external js does not work, when replaced by inside the body or < / html> References to external js on top are normal

Related articles: