javascript 날짜 연동 선택 기[그 중 일부 코드 는 배 울 만하 다]

var $ = function(id) { return 'string' == typeof id ? document.getElementById(id) : id; }; var Extend = function(destination, source) { for(var pro in source) { destination[pro] = source[pro]; } return destination; } var addEvent = function(obj, type, fn) { if(obj.addEventListener) { obj.addEventListener(type, fn, false); return true; }else if(obj.attachEvent) { obj['e'+type+fn] = fn; obj[type+fn] = function(){ obj['e'+type+fn](window.event); } obj.attachEvent('on'+type, obj[type+fn]); return true; } return false; } /*! * DateSelector**Copyright(c)2009 GoodNess 2010*날짜:2009-12-15(화요일)*/function DateSelector(idYear,idMonth,idDate,options){var D=new Date();this.year = $(idYear); this.month = $(idMonth); this.date = $(idDate); this.nowYear = D.getFullYear(); this.nowMonth = D.getMonth() + 1; this.nowDate = D.getDate(); Extend(this, this.setOptions(options)); }; DateSelector.prototype={setOptions:function(options){/기본 항목 this.options={floor Year:5,//현재 연도 5 년 전 ceilYear:7,//현재 연도 후 7 년 전 Start:function(){},//선행 이벤트 onEnd:function(){}//종료 이벤트};return Extend(this.options, options || {}); }, createOption: function(container, start, end, sign){ sign = sign || start; var _num = parseInt(end-start+1, 10); container.options.length = _num; for(var i = 0; i < _num; i++) { container.options[i].text = container.options[i].value = start + i; } container.selectedIndex = (sign-start >= _num ? _num-1 : sign-start); }, getDate: function(y, m){ return new Date(y, m, 0).getDate(); }, getSelText: function(sel) { return sel.options[sel.selectedIndex].text; }, changeDate: function(bindO){ var _this = this; addEvent(bindO, 'change', function(){ var y = _this.getSelText(_this.year), m = _this.getSelText(_this.month), d = _this.getSelText(_this.date); _this.createOption(_this.date, 1, _this.getDate(y, m), d); _this.onEnd(); }); }, bindEvents: function(){ var _this = this; this.changeDate(this.year); this.changeDate(this.month); addEvent(this.date, 'change', function(){ _this.onEnd(); }); }, init: function(){ var _startYear = parseInt(this.nowYear - this.floorYear, 10); var _endYear = parseInt(this.nowYear + this.ceilYear, 10); var _endDate = this.getDate(this.nowYear, this.nowMonth, 0); this.createOption(this.year, _startYear, _endYear, this.nowYear); this.createOption(this.month, 1, 12, this.nowMonth); this.createOption(this.date, 1, _endDate, this.nowDate); this.bindEvents(); this.onStart(); } }; var dateSelector = new DateSelector('year', 'month', 'date', {floorYear: 1}); dateSelector.onStart=dateSelector.onEnd=function(){$('info').innerHTML=this.getSelectText(this.year)+'년'+('0'+this.getSelectText(this.month).slice(-2)+'월'+('0'+this.getSelectText(this.date).slice(-2)+'일';}dateSelector.init(); [Ctrl+A 전체 주석:][매개 변수 설명] var dateSelector = new DateSelector(年下拉ID, 月下拉ID, 日下拉ID, {floorYear: 向前几年, ceilYear: 向后几年}); dateSelector.onStart = dateSelector.onEnd = function(){ // 自定义开始结束事件 $('info').innerHTML = this.getSelText(this.year) + '年' + ('0' + this.getSelText(this.month)).slice(-2) + '月' + ('0' + this.getSelText(this.date)).slice(-2) + '日'; } dateSelector.init(); // 初始化开始 [설명 텍스트]여기에서 option 을 만 드 는 방법 은 중간 사각형 의 options[i].text=options[i].value=i 를 선택 하 였 습 니 다.그 동안 이 방법 을 사 용 했 습 니 다:container.options[container.options.length]=new Option(i,i,false,(i=sign?true:false))이 new Option 은 4 개의 매개 변 수 를 사용 할 수 있 습 니 다(text,value,defaultSelected,selected).마지막 매개 변 수 는 선택 을 설정 할 수 있 습 니 다.그러나 공식 자 료 를 찾 지 못 했 습 니 다.IE6 에서 도 버그 를 만 났 습 니 다.여러분 이 사용 하 셨 던 것 을 바로 잡 아 주세요.버그 는 IE7,IE8 에서 이 걸 보 여 줍 니 다.FF3 등 은 문제 가 없습니다.하지만 IE6 에서 선 택 된 것 은 이전 입 니 다.아직 원인 은 알 수 없습니다.(확인 결과 IE Tester 의 문제 인 것 같 습 니 다.그럼 아래 방안 도 간결 하 게 option 방안 을 생 성 합 니 다)테스트 코드: <select id="year"></select> <script type="text/javascript"> <!-- var osel = document.getElementById('year'); var sign = 2008; for(var i = 2001; i < 2010; i++) { osel.options[osel.options.length] = new Option(i, i, false, (i == sign ? true : false)); } //--> </script>