날짜 드롭다운 menu_time 및 날짜에 대한 js 구현 코드

1. 먼저 렌더링을 살펴보세요:

2.js 코드
year_month_day.js

코드 복사 코드는 다음과 같습니다.

year_month_day.js
function DateSelector(selYear, selMonth, selDay) {
this .selYear = selYear ;
this.selMonth = selMonth;
this.selYear.Group = this; 연도와 월을 지정합니다. 드롭다운 메뉴에서 onchange 이벤트를 처리하는 함수를 추가합니다.
if (window.document.all != null) // IE
{
this.selYear.attachEvent(" onchange", DateSelector.Onchange);
this.selMonth.attachEvent("onchange", DateSelector.Onchange);
}
else // Firefox
{
this.selYear.addEventListener( "change", DateSelector.Onchange, false)
this.selMonth.addEventListener("change", DateSelector.Onchange, false)
}
if (arguments.length == 4) // If 전달된 매개변수의 수는 4이고, 마지막 매개변수는 날짜 객체여야 합니다.
this.InitSelector(arguments[3].getFullYear(), 인수[3].getMonth() 1, 인수[3].getDate( ));
else if (arguments.length = = 6) // 전달된 매개변수의 개수가 6인 경우 마지막 세 매개변수는 초기 연도, 월, 일 값이어야 합니다 ​​
this.InitSelector (인수[3], 인수[4], 인수[5]);
else // 기본적으로 현재 날짜가 사용됩니다.
{
var dt = new Date()
this. InitSelector(dt.getFullYear(), dt.getMonth() 1, dt.getDate()) ;
}
}
// 최대 연도 속성 추가
DateSelector.prototype.MinYear = 1900 ;
// 최대 연도 속성 추가
DateSelector.prototype.MaxYear = (new Date()).getFullYear()
//연도 초기화
DateSelector.prototype.InitYearSelect = function ( ) {
// OPION 요소를 연도 선택 개체에 추가하는 루프
for (var i = this.MaxYear; i >= this.MinYear; i--) {
// 새로 만들기 OPTION 객체
var op = window.document.createElement("OPTION");
// OPTION 객체의 값을 설정합니다.
op.value = i
// OPTION 객체
op.innerHTML = i;
// 연도 선택 객체에 추가
this.selYear.appendChild(op)
}
}
//월 초기화
DateSelector.prototype.InitMonthSelect = function () {
// 월 선택 객체에 OPION 요소를 추가하는 루프
for (var i = 1; i < 13; i ) {
/ / 새 OPTION 객체 생성
var op = window.document.createElement("OPTION");
// OPTION 설정
op.value = i; OPTION 개체의 내용
op.innerHTML = i;
// 월 선택 개체에 추가
this.selMonth.appendChild( op)
}
}
/ / 연도와 월을 기준으로 이번 달의 일수를 가져옵니다.
DateSelector.DaysInMonth = function(연도, 월) {
var date = new Date(연도, 월, 0)
return date.getDate();
}
//일수 초기화
DateSelector.prototype.InitDaySelect = function () {
// 현재 연도와 월을 가져오려면 parseInt 함수를 사용하세요
var year =parseInt(this.selYear.value);
varmonth=parseInt(this.selMonth.value);
// 이번 달의 일수 가져오기
var daysInMonth = DateSelector .DaysInMonth(연도, 월);
// 원래 옵션 지우기
this.selDay.options.length = 0;
// 날짜 선택 개체에 OPION 요소를 추가하는 루프
var i = 1; i <= daysInMonth; i ) {
// 새 OPTION 객체 생성
var op = window.document.createElement("OPTION")// 값 설정 OPTION 개체
op.value = i;
// OPTION 개체의 내용 설정
op.innerHTML = i
// 날짜 선택 개체에 추가
this.selDay; .appendChild(op);
}
}
// 연도 및 월 변경 이벤트를 처리하는 메서드, 이벤트 소스 객체(예: selYear 또는 selMonth)를 가져오고
// 해당 Group 객체를 호출합니다. (예: DateSelector 인스턴스, 함수에서 제공하는 InitDaySelect 생성자 참조) 일수를 다시 초기화합니다.
//매개변수 e는 이벤트 객체입니다.
DateSelector.Onchange = function (e) {
var selector = window.document.all != null ? e.srcElement:
selector.Group.InitDaySelect();
}
//매개변수에 따라 드롭다운 메뉴 옵션 초기화
DateSelector.prototype.InitSelector = function (연, 월, 일) {
// 이 메소드는 외부에서 호출할 수 있으므로 여기서 selYear 및 selMonth 옵션도 지워야 합니다
// 또한 InitDaySelect 메소드에는 이미 명확한 날짜 드롭다운 메뉴가 있으므로 여기서 작업을 반복할 필요가 없습니다
this.selYear.options.length = 0
this.selMonth.options.length = 0; /연월 초기화
this.InitYearSelect();
this.InitMonthSelect() ;
//연월 초기값 설정
this.selYear.selectedIndex = this.MaxYear - year;
this.selMonth.selectedIndex = 월 - 1;
//일수 초기화
this.InitDaySelect()
//일의 초기값 설정
this .selDay.selectedIndex = 일 - 1
}


3.HTML代码
year_month_day.htm

复system代码 代码如下:

year_month_day.htm


<머리>




<본문>








지금 线运行演示：

如何实现一个日期下拉菜单<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title> </title> <select id="selYear"> </select><select id="selMonth"> </select><select id="selDay"> </select>

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.