叶落为重生每片落下的叶子都是为了下一次的涅槃...^_^

一简易的DatePicker

DatePicker是个很常见的组件。我大致搜了一下,满大篇的demo。各大框架也把DatePicker纳入基本的组件库里。jQ的ui有,YUI的widget里也有。而且也封装的结结实实,兼容性,通用性,都做得挺好。于是在代码完善的同时,代码量自然也不会少。即使建立在基础库之上,代码也是好几百行。

真正使用的时候可能并不需要这么完善的功能。咱们就写个简陋点的东西,够自己用就行了。

而且以前有朋友提出我发的东西都是一些娱乐货,没有什么实用性,这次就当是个开始,抛个砖,以后时不时发个带一些实用性的东东。 

<!-- 以下demo没有什么出彩的地方,仅供有需要的朋友看看 --> 

以下是源码:

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">&nbsp;</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 != 0for (var i=0; i<7-toend; i++) con.push('<td class="noborder">&nbsp;</td>');
            _html 
+= '<tr>'+fn("-1, null""&lt;&lt;")+fn("null, -1""&lt;")+'<td title="'+this.n+'DatePicker" colspan=3 class="strong">'+year+'/'+month+'/'+date+'</td>'+fn("null, 1""&gt;")+fn("1, null""&gt;&gt;")+'</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;
}();

 调用方式:

    new DatePicker('_DatePicker_demo', {
        inputId: 
'date-input',
        className: 
'date-picker-wp',
        seprator: 
'-'
    });

 第一个参数:实例名,
第二个参数一个对象字面量,包括输入框的id(必须),弹出日历box的className,日期样式的分隔符如‘-’,‘/’,等。后两个可省略,默认值‘datepicker’,‘/’。 

posted on 2011-02-14 19:00  岑安  阅读(9605)  评论(9编辑  收藏  举报

导航