Copy code The code is as follows: <br><!-- <BR>.wr{font-size: 12pt; line-height: 22px} <BR>.wr1 { FONT-SIZE: 12px; LINE-HEIGHT: 200%} <BR>.wr2 { FONT-SIZE: 14px; LINE-HEIGHT: 200%} <BR>.wr3 { FONT-SIZE: 12px} <BR>.wr4 { FONT-SIZE: 12px; LINE-HEIGHT: 150%} <BR>// --> <br> 日期自动输入控件 <br>.date-picker-wp { <br>display: none; <br>position: absolute; <br>background: #f1f1f1; <br>left: 40px; <br>top: 40px; <br>border-top: 4px solid #3879d9; <br>} <br>.date-picker-wp table { <br>border: 1px solid #ddd; <br>} <br>.date-picker-wp td { <br>background: #fafafa; <br>width: 22px; <br>height: 18px; <br>border: 1px solid #ccc; <br>font-size: 12px; <br>text-align: center; <br>} <br>.date-picker-wp td.noborder { <br>border: none; <br>background: none; <br>} <br>.date-picker-wp td a { <br>color: #1c93c4; <br>text-decoration: none; <br>} <br>.strong {font-weight: bold} <br>.hand {cursor: pointer; color: #3879d9} <br> <br>var DatePicker = function () { <br>var $ = function (i) <br>{ <br> return document.getElementById(i) <br>}, <br>addEvent = function (o, e, f) {o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on' e, function(){f.call(o)})}, <br>getPos = function (el) { <br>for (var pos = {x:0, y:0}; el; el = el.offsetParent) { <br>pos.x = el.offsetLeft; <br>pos.y = el.offsetTop; <br>} <br>return pos; <br>}; <br>var init = function (n, config) { <br>window[n] = this; <br>Date.prototype._fd = function () {var d = new Date(this); d.setDate(1); return d.getDay()}; <br>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;}; <br>this.n = n; <br>this.config = config; <br>this.D = new Date; <br>this.el = $(config.inputId); <br>this.el.title = this.n 'DatePicker'; <br>this.update(); <br>this.bind(); <br>}; <br>init.prototype = { <br>update : function (y, m) { <br>var con = [], week = ['Su','Mo','Tu','We','Th','Fr','Sa'], D = this.D, _this = this; <br>fn = function (a, b) {return '<td title="' _this.n 'DatePicker" class="noborder hand" onclick="' _this.n '.update(' a ')">' b '</td>'}, <br>_html = '<table cellpadding=0 cellspacing=2>'; <br>y && D.setYear(D.getFullYear() y); <br>m && D.setMonth(D.getMonth() m); <br>var year = D.getFullYear(), month = D.getMonth() 1, date = D.getDate(); <br>for (var i=0; i<week.length; i ) con.push('<td title="' this.n 'DatePicker" class="noborder">' week[i] '</td>'); <br>for (var i=0; i<D._fd(); i ) con.push('<td title="' this.n 'DatePicker" class="noborder"> </td>'); <br>for (var i=0; i<D._fc(); i ) con.push('<td class="hand" onclick="' this.n '.fillInput(' year ', ' month ', ' (i 1) ')">' (i 1) '</td>'); <br>var toend = con.length%7; <br>if (toend != 0) for (var i=0; i<7-toend; i ) con.push('<td class="noborder"> </td>'); <br>_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>'; <br>for (var i=0; i<con.length; i ) _html = (i==0 ? '<tr>' : i%7==0 ? '</tr><tr>' : '') con[i] (i == con.length-1 ? '</tr>' : ''); <br>!!this.box ? this.box.innerHTML = _html : this.createBox(_html); <br>}, <br>fillInput : function (y, m, d) { <br>var s = this.config.seprator || '/'; <br>this.el.value = y s m s d; <br>this.box.style.display = 'none'; <br>}, <br>show : function () { <br>var s = this.box.style, is = this.mask.style; <br>s['left'] = is['left'] = getPos(this.el).x 'px'; <br>s['top'] = is['top'] = getPos(this.el).y this.el.offsetHeight 'px'; <br>s['display'] = is['display'] = 'block'; <br>is['width'] = this.box.offsetWidth - 2 'px'; <br>is['height'] = this.box.offsetHeight - 2 'px'; <br>}, <br>hide : function () { <br>this.box.style.display = 'none'; <br>this.mask.style.display = 'none'; <br>}, <br>bind : function () { <br>var _this = this; <br>addEvent(document, 'click', function (e) { <br>e = e || window.event; <br>var t = e.target || e.srcElement; <br>if (t.title != _this.n 'DatePicker') {_this.hide()} else {_this.show()} <br>}); <br>}, <br>createBox : function (html) { <br>var box = this.box = document.createElement('div'), mask = this.mask = document.createElement('iframe'); <br>box.className = this.config.className || 'datepicker'; <br>mask.src = 'javascript:false'; <br>mask.frameBorder = 0; <br>box.style.cssText = 'position:absolute;display:none;z-index:9999'; <br>mask.style.cssText = 'position:absolute;display:none;z-index:9998'; <br>box.title = this.n 'DatePicker'; <br>box.innerHTML = html; <br>document.body.appendChild(box); <br>document.body.appendChild(mask); <br>return box; <br>} <br>}; <br>return init; <br>}(); <br>onload = function () { <br>new DatePicker('_DatePicker_demo', { <br>inputId: 'date-input', <br>className: 'date-picker-wp', <br>seprator: '-' <br>}); <br>} <br> 生日： * html页面中的js执行顺序：1） 在head标签内的最先执行2） 在body标签内的 执行3） 当在 body标签中 加了 onload 事件时 对应的 js 最后执行，也就是当页面加载完在执行 注意：当在 body标签中 加了 onload 事件时 在head标签内，所引用外部的 js 不起作用，当换成 在body 内部或
