jq的ui有，yui的widget里也有。而且也封装的结结实实，兼容性，通用性，都做得挺好。于是在代码完善的同时，代码量自然也不会少。即使建立在基础库之上，代码也是好几百行。
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;
}();
第二个参数一个对象字面量，包括输入框的id（必须），弹出日历box的classname，日期样式的分隔符如‘-'，‘/'，等。后两个可省略，默认值‘datepicker'，‘/'。
我要评论
网友评论