纯JS实现出生日期[年月日]下拉菜单效果
在制作网页时,可能需要给用户提供注册帐号页面,用户注册设计很多信息,其中就有关于出生日期的,出于用户体验,不想让用户手动输入,而HTML5的date,目前很多浏览器支持的并不是很好,所以就可以用JS实现年、月、日3个下拉框的日期选择。具体代码如下:
1、新建一个js文件,如birthday.js;
functionDateSelector(selYear,selMonth,selDay){//定义函数 this.selYear=selYear; this.selMonth=selMonth; this.selDay=selDay; this.selYear.Group=this; this.selMonth.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)//如果传入参数个数为4,最后一个参数必须为Date对象 this.InitSelector(arguments[3].getFullYear(),arguments[3].getMonth()+1,arguments[3].getDate()); elseif(arguments.length==6)//如果传入参数个数为6,最后三个参数必须为初始的年月日数值 this.InitSelector(arguments[3],arguments[4],arguments[5]); else//默认使用当前日期 { vardt=newDate(); this.InitSelector(dt.getFullYear(),dt.getMonth()+1,dt.getDate()); } } //增加一个最小年份的属性--最老年份 DateSelector.prototype.MinYear=1960; //增加一个最大年份的属性--最新年份,即当前时期getFullYear() DateSelector.prototype.MaxYear=(newDate()).getFullYear(); //初始化年份 DateSelector.prototype.InitYearSelect=function(){ //循环添加OPION元素到年份select对象中 for(vari=this.MaxYear;i>=this.MinYear;i--){ //新建一个OPTION对象 varop=window.document.createElement("OPTION"); //设置OPTION对象的值 op.value=i; //设置OPTION对象的内容 op.innerHTML=i; //添加到年份select对象 this.selYear.appendChild(op); } } //初始化月份 DateSelector.prototype.InitMonthSelect=function(){ //循环添加OPION元素到月份select对象中 for(vari=1;i<13;i++){ //新建一个OPTION对象 varop=window.document.createElement("OPTION"); //设置OPTION对象的值 op.value=i; //设置OPTION对象的内容 op.innerHTML=i; //添加到月份select对象 this.selMonth.appendChild(op); } } //根据年份与月份获取当月的天数 DateSelector.DaysInMonth=function(year,month){ vardate=newDate(year,month,0); returndate.getDate(); } //初始化天数 DateSelector.prototype.InitDaySelect=function(){ //使用parseInt函数获取当前的年份和月份 varyear=parseInt(this.selYear.value); varmonth=parseInt(this.selMonth.value); //获取当月的天数 vardaysInMonth=DateSelector.DaysInMonth(year,month); //清空原有的选项 this.selDay.options.length=0; //循环添加OPION元素到天数select对象中 for(vari=1;i<=daysInMonth;i++){ //新建一个OPTION对象 varop=window.document.createElement("OPTION"); //设置OPTION对象的值 op.value=i; //设置OPTION对象的内容 op.innerHTML=i; //添加到天数select对象 this.selDay.appendChild(op); } } //处理年份和月份onchange事件的方法,它获取事件来源对象(即selYear或selMonth) //并调用它的Group对象(即DateSelector实例,请见构造函数)提供的InitDaySelect方法重新初始化天数 //参数e为event对象 DateSelector.Onchange=function(e){ varselector=window.document.all!=null?e.srcElement:e.target; selector.Group.InitDaySelect(); } //根据参数初始化下拉菜单选项 DateSelector.prototype.InitSelector=function(year,month,day){ //由于外部是可以调用这个方法,因此我们在这里也要将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=month-1; //初始化天数 this.InitDaySelect(); //设置天数初始值 this.selDay.selectedIndex=day-1; }
2、在注册表单中的页面,引用刚才写的js
年 月 日 varselYear=window.document.getElementById("selYear"); varselMonth=window.document.getElementById("selMonth"); varselDay=window.document.getElementById("selDay"); //新建一个DateSelector类的实例,将三个select对象传进去 newDateSelector(selYear,selMonth,selDay,1995,1,17);