JS简易日期控件

shenzhw

浏览: 61743 次
性别:
来自: 福州

最近访客更多访客>>

double_h

wangpengchao

可乐冰红茶茶

549885855

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (41)

社区版块

存档分类

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>

分享到：