JS 간이 날짜 컨트롤

4539 단어 html
JS 파일 내용:

function DateInput(name,yearBegin,yearEnd)
{
       this.name=name;
       this.yearBegin=yearBegin;
       this.yearEnd=yearEnd;
       var today=new Date();
       this.curYear=today.getFullYear();
       this.curMonth=today.getMonth() + 1;
       this.curDay=today.getDate();
 
       this.outputHTML=DateInput_outputHTML;
       this.onMonthChanged=DateInput_onMonthChanged;
       this.onYearChanged=DateInput_onYearChanged;
}
function DateInput_onYearChanged()
{
       var yearSelector=document.all[this.name+"_year"];
       var monthSelector=document.all[this.name+"_month"];
       var daySelector=document.all[this.name+"_day"];
 
       var currentYear=parseInt(yearSelector.value);
       var currentMonth=parseInt(monthSelector.value);
 
       if(currentMonth!=2) return;
 
       var days=30;
       var isLeapYear=false;
       if(currentYear % 400 == 0 || (currentYear % 4 == 0 && currentYear % 100 !=0)) days=29;
       else days=28;
 
       var html="";
       daySelector.length=0;
       for(i=1;i<=days;i++) daySelector.options[daySelector.length] = new Option(i,i)
}
function DateInput_onMonthChanged()
{
       var yearSelector=document.all[this.name+"_year"];
       var monthSelector=document.all[this.name+"_month"];
       var daySelector=document.all[this.name+"_day"];
 
       var currentYear=parseInt(yearSelector.value);
       var currentMonth=parseInt(monthSelector.value);
 
       var days=30;
       var isLeapYear=false;
       if(currentYear%400==0||(currentYear%4==0 && currentYear % 100!=0)) isLeapYear=true;
       switch(currentMonth)
       {
       case 1:    case 3:    case 5:    case 7:    case 8: case 10: case 12: days=31;
       }
       if(currentMonth==2)
       if(isLeapYear) days=29;
       else days=28;
 
       var html="";
       daySelector.length=0;
       for(i=1;i<=days;i++) daySelector.options[daySelector.length] = new Option(i,i)
}
function DateInput_outputHTML()
{
       var html="";
       var i;
 
       html+="<select name='"+this.name+"_year' onchange='"+this.name+".onYearChanged()'>";
       for(i=this.yearBegin;i<=this.yearEnd;i++)
       {
       	html+="   <option";
       	if(i==this.curYear){
       		html+="   <option selected='selected'";
       	}
       	html+=" value='"+i+"'>"+i+"</option>";
       }
       
       html+="</select> ";
 
       html+="<select name='"+this.name+"_month' onchange='"+this.name+".onMonthChanged()'>";
       for(i=1;i<=12;i++)
       {
       	html+="   <option";
       	if(i==this.curMonth)
       	 html+=" selected='selected'";
       	if(i<10)
       	 i="0"+i;
       	html+=" value='"+i+"'>"+i+"</option>";
       }
       html+="</select> ";       
 
       html+="<select name='"+this.name+"_day'>";
       for(i=1;i<=31;i++)
       {
       	html+="   <option";
       	if(i==this.curDay)
       	html+=" selected='selected'"
       	if(i<10)i="0" + i;
       	html+=" value='"+i+"'>"+i+"</option>";
       }
       
       html+="</select> ";
       document.write(html);
}

HTML 파일 내용:

<html>
	<head>
		<script src="DateInput.js"></script>
	</head>
	<body>
		<input type="submit" disabled="disabled">
		<script language="javascript">
			var date1=new DateInput("date1",1900,2100);
			date1.outputHTML();
			
		</script>
	</body>
</html>
동적 생 성 스타일, js 가 져 오기
js 이미지 업로드 즉시 표시

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage