JavaScript实现的日期控件具体代码

复制代码代码如下:

　　<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>日期自动输入控件</title>

　　</head>

　　.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>

　　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>

　　<form >

　　<tr>

　　</td>

　　</tr>

　　<tr>

　　</tr>

　　</table>

　　</form>

　　</body>

　　</html>

　　html页面中的js执行顺序：

　　1）在head标签内的最先执行

　　2）在body标签内的执行

　　3）当在 body标签中加了 onload 事件时对应的 js 最后执行，也就是当页面加载完在执行

　　注意：当在 body标签中加了 onload 事件时在head标签内，所引用外部的 js 不起作用，当换成在body 内部或</html>之上引用外部js时可正常引用

教程首页更多教程