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

<title> 날짜 선택기 </title> <style> body { margin: 0px; padding: 0px; font-size: 12px; } #year, #month, #date{ width: 60px; margin-right: 3px; } </style> <select id="year"> </select><select id="month"></select><select id="date"></select><span id="info"> </span>
[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

코드는 다음과 같습니다.


< ;select id="year">