javascript 날짜 연결 선택기 [일부 코드는 학습할 가치가 있습니다]

날짜 선택기 body { margin: 0px; padding: 0px; font-size: 12px; } #year, #month, #date{ width: 60px; margin-right: 3px; } [Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ] [ 매개변수 설명] 코드 복사 코드는 다음과 같습니다. 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(); // 초기화 시작 [설명 텍스트] 여기서 옵션을 생성하는 방법은 상당히 만족스러운 옵션입니다.[i].text = options[i].value = i 저는 이 방법을 사용했습니다. 기간: container.options [container.options.length] = new Option(i, i, false, (i == sign ? true : false)) 이 새 옵션에는 4개의 매개변수를 사용할 수 있습니다. (text, value, defaultSelected, selected); 마지막으로 매개변수를 설정하고 선택할 수 있습니다. 그러나 공식적인 정보는 발견되지 않았습니다. IE6에서도 버그가 발생했습니다. . BUG 데모 이것은 IE7, IE8, FF3 등에서는 문제가 없지만 IE6에서는 이전 버전이 선택됩니다(확인 후, IE Tester의 문제인 것 같습니다. 그렇다면 아래의 해결 방법도 간단한 옵션 생성 해결 방법입니다. 테스트 코드: 복사 code 코드는 다음과 같습니다. &lt ;select id="year"> var osel = document.getElementById('연도' ); var sign = 2008; for(var i = 2001; i osel.options[osel.options.length] = new Option(i, i, false , (i == sign ? true : false)) } //-- > 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 GoodNess2010 * Date: 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 = { floorYear: 5, // 距当前年份前5年 ceilYear: 7, // 距当前年份后7年 onStart: 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 ? _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.getSelText(this.year) + '年' + ('0' + this.getSelText(this.month)).slice(-2) + '月' + ('0' + this.getSelText(this.date)).slice(-2) + '日'; } dateSelector.init();