코드 복사 코드는 다음과 같습니다. <머리> <스타일> 日期自动输入控件 <br>.date-picker-wp { <br>표시: 없음; <br>위치: 절대; <br>배경: #f1f1f1; <br>왼쪽: 40px; <br>상단: 40px; <br>테두리 상단: 4px 솔리드 #3879d9; <br>} <br>.date-picker-wp 테이블 { <br>테두리: 1px 솔리드 #ddd; <br>} <br>.date-picker-wp td { <br>배경: #fafafa; <br>너비: 22px; <br>높이: 18px; <br>테두리: 1px 실선 #ccc; <br>글꼴 크기: 12px; <br>텍스트 정렬: 가운데; <br>} <br>.date-picker-wp td.noborder { <br>border: 없음; <br>배경: 없음; <br>} <br>.date-picker-wp td a { <br>color: #1c93c4; <br>텍스트 장식: 없음; <br>} <br>.strong {글꼴 두께: 굵게} <br>.hand {커서: 포인터; 색상: #3879d9} <br> <br>var DatePicker = 함수() { <br>var $ = 함수(i) <br>{ <br> return document.getElementById(i) <br>}, <br>addEvent = 함수(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.offsetParent) { <br>pos.x = el.offsetLeft; <br>pos.y = el.offsetTop; <br>} <br>반품 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); d.getDay()}를 반환합니다. <br>Date.prototype._fc = 함수() {var d1 = 새 날짜(this), d2 = 새 날짜(this); d1.setDate(1); d2.setDate(1); d2.setMonth(d2.getMonth() 1); 반환(d2-d1)/86400000;}; <br>this.n = n; <br>this.config = 구성; <br>this.D = 새 날짜; <br>this.el = $(config.inputId); <br>this.el.title = this.n '날짜 선택기'; <br>this.update(); <br>this.bind(); <br>}; <br>init.prototype = { <br>update : 함수(y, m) { <br>var con = [], week = ['Su','Mo','Tu','We','Th ','Fr','Sa'], D = this.D, _this = this; <br>fn = 함수 (a, b) {return '<td title="' _this.n 'DatePicker" class="noborder hand" onclick="' _this.n '.update(' a ')"> ;' b '</td>'}, <br>_html = '<table cellpadding=0cellspacing=2>'; <br>y && D.setYear(D.getFullYear() y); <br>m && D.setMonth(D.getMonth() m); <br>var year = D.getFullYear(), 월 = D.getMonth() 1, 날짜 = D.getDate(); <br>for (var i=0; i<week.length i con.push week>'); <br>for (var i=0; i<d._fd i con.push </td>>for (var i=0; i<d._fc i con.push class="hand" onclick="' this.n '.fillInput(' year ', ' 월 ', '(i 1) ')">' (i 1) '</td>'); <br>var toend = con.length%7; <br>if (toend != 0) for (var i=0; i_html = '<tr>' fn("-1, null", "<<") fn("null, -1", "<") '<td title="' this.n 'DatePicker" colspan=3 class=" 강하다">' 연도 '/' 월 '/' 날짜 '</td>' fn("null, 1", ">") fn("1, null", ">>") ''; <br>for (var i=0; i<con.length i _html="(i==0" : con con.length-1>!!this.box ? this.box.innerHTML = _html : this.createBox(_html); <br>}, <br>fillInput : 함수(y, m, d) { <br>var s = this.config.seprator || '/'; <br>this.el.value = ysmsd; <br>this.box.style.display = '없음'; <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'] = '차단'; <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 = '없음'; <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 : 함수(html) { <br>var box = this.box = document.createElement('div'), 마스크 = this.mask = document.createElement('iframe'); <br>box.className = this.config.className || '날짜 선택기'; <br>mask.src = 'javascript:false'; <br>mask.frameBorder = 0; <br>box.style.cssText = '위치:절대;표시:없음;z-index:9999'; <br>mask.style.cssText = '위치:절대;표시:없음;z-index:9998'; <br>box.title = this.n 'DatePicker'; <br>box.innerHTML = html; <br>document.body.appendChild(상자); <br>document.body.appendChild(마스크); <br>반품 상자; <br>} <br>}; <br>초기화 반환; <br>}(); <br>onload = function () { <br>new DatePicker('_DatePicker_demo', { <br>inputId: 'date-input', <br>className: 'date-picker-wp', <br>seprator: ' -' <br>}); <br>} <br> 생일： * <입력 유형 = "제출" 값 = "确결정"/> <입력 유형 = "재설정" 값 = "중계"/>
