http://blog.csdn.net/lfywy/archive/2008/05/23/2475477.aspx
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>年月日下拉菜单日期</title>
<scripttype="text/javascript">...
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=1900;
//增加一个最大年份的属性
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;
}
</script>
</head>
<body>
<formid="form1"runat="server">
<selectid="selYear"runat="server"></select>
<selectid="selMonth"runat="server"></select>
<selectid="selDay"runat="server"></select>
<scripttype="text/javascript">...
varselYear=window.document.getElementById("selYear");
varselMonth=window.document.getElementById("selMonth");
varselDay=window.document.getElementById("selDay");
//新建一个DateSelector类的实例,将三个select对象传进去
newDateSelector(selYear,selMonth,selDay,2004,2,29);
//也可以试试下边的代码
//vardt=newDate(2004,1,29);
//newDateSelector(selYear,selMonth,selDay,dt);
</script>
</form>
</body>
</html>
分享到:
相关推荐
NULL 博文链接:https://hrsvici412.iteye.com/blog/337605
js 实现年月日下拉选择 包括计算闰年 功能比较全,只是下拉条的高度没有控制
年 月 日下拉形式的 JS时间小插件 select 下拉框的形式开发的时间小插件, 只有年月日, 不含时 分秒
用Javascript实现日期下拉菜单,可以修改日期的范围等。
通过js 实现年月日连动 带实例。通过js 实现年月日连动 带实例。
NULL 博文链接:https://newtime.iteye.com/blog/423563
JS年月日三级联动下拉框日期选择代码
jquery 年月日期实现 有中文 、年月实现
织织网应实际使用开发的一个js年月选择器,采用原生js开发,兼容IE、FF(Firefox)、谷歌(Chrome),其他杂牌浏览器都是基于这三种内核的,就不一一测试了。 插件非常的简单,完全开源,可以做二次开发。 因为很...
js验证日期格式,比较日期大小,判断两日期年月是否相同借鉴.pdf
原生js实现的一款年月日日期选择特效插件下载。基于原生JavaScript实现,非常简单实用的一款日历选择插件。
1、可以选择年月或者选择日期,比如:选择年月,在显示框中就显示2022-06,如果选择日期,则显示2022-06-04 2、默认是当前日期,当点击控件时弹框显示定位到当前的年和月,日默认为空
很好的js日期控件,插件式 方便 易用 。 有详细的使用api,很强大。 年月日时分秒 多种组合,随便用,通过一个函数,传递不同的参数可生成各种形式的日期组合插件。 皮肤颜色可任意修改。
JS年月日三级联动下拉框日期选择代码,默认当前日期,代码附带详细中文注释,供大家参考。
找了几天未找到符合国人使用习惯的日期时间控件,一狠心手动制作了此控件,本控件在tms7.5.2的tadvdatetimepicker控件基础上修改而来,实现年月日时分秒自动切换,符合国人使用习惯。原创资源。 安装方法:打开...
一个基于jQuery 实现的jSelectDate 下拉日期选择器插件源码
树菜单,日期选择器树菜单,日期选择器树菜单,日期选择器树菜单,日期选择器树菜单,日期选择器树菜单,日期选择器
JS实现的年月日三级联动下拉框日期选择效果源码.zip
日期格式年月日(yyyy-mm-dd) 时间格式时分(hh:mm)