javascript 구현 간단 한 DatePicker 달력

10137 단어 DatePicker일력
jQ 의 ui 는 있 고,YUI 의 widget 에 도 있 습 니 다.또한 튼튼 하고 호환성 이 있 으 며 유 니 버 설 적 으로 잘 만 들 어 졌 습 니 다.따라서 코드 가 완벽 한 동시에 코드 의 양도 자연히 적지 않 을 것 이다.기본 라 이브 러 리 위 에 세 워 져 도 코드 는 수백 줄 이다.진정 으로 사용 할 때 는 이렇게 완벽 한 기능 이 필요 하지 않 을 수도 있다.우 리 는 좀 누추 한 것 을 써 서 스스로 쓸 수 있 으 면 된다.그리고 예전 에 어떤 친구 가 제 가 보 낸 물건 은 모두 오락 상품 이 라 고 제 안 했 는데 실용성 이 별로 없 었 습 니 다.이번 에는 시작 이 라 고 생각 하고 벽돌 을 던 져 서 나중에 가끔 실 용적 인 물건 을 보 냅 니 다. DatePicker 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 ''+b+''}, _html = ''; 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[i]+''); for (var i=0; i '); for (var i=0; i'+(i+1)+''); var toend = con.length%7; if (toend != 0) for (var i=0; i<7-toend; i++) con.push(''); _html += ''+fn("-1, null", "<<")+fn("null, -1", "<")+''+fn("null, 1", ">")+fn("1, null", ">>")+''; for (var i=0; i' : i%7==0 ? '' : '') + con[i] + (i == con.length-1 ? '' : ''); !!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: '-' }); new DatePicker('_demo 2',{input Id:'demo 2',className:'date-picker-wp'})}
[Ctrl+A 전체 선택:]다음은 소스 코드:
 
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 != 0) for (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(필수),달력 상 자 를 팝 업 하 는 className 을 포함 합 니 다.날짜 스타일 의 구분자 가'-','/'등 입 니 다.다음 두 개 는 생략 할 수 있 습 니 다.기본 값 인'datepicker','/'입 니 다.

좋은 웹페이지 즐겨찾기

'+year+'/'+month+'/'+date+'