<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>如何实现一个日期下拉菜单</title>
<script type="text/javascript">
function DateSelector(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());
else if(arguments.length == 6) // 如果传入参数个数为6，最后三个参数必须为初始的年月日数值
this.InitSelector(arguments[3], arguments[4], arguments[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元素到年份select对象中
for(var i = this.MaxYear; i >= this.MinYear; i--)
{
// 新建一个OPTION对象
var op = window.document.createElement("OPTION");
// 设置OPTION对象的值
op.value = i;
// 设置OPTION对象的内容
op.innerHTML = i;
// 添加到年份select对象
this.selYear.appendChild(op);
}
}
// 初始化月份
DateSelector.prototype.InitMonthSelect = function()
{
// 循环添加OPION元素到月份select对象中
for(var i = 1; i < 13; i++)
{
// 新建一个OPTION对象
var op = window.document.createElement("OPTION");
// 设置OPTION对象的值
op.value = i;
// 设置OPTION对象的内容
op.innerHTML = i;
// 添加到月份select对象
this.selMonth.appendChild(op);
}
}
// 根据年份与月份获取当月的天数
DateSelector.DaysInMonth = function(year, month)
{
var date = new Date(year, month, 0);
return date.getDate();
}
// 初始化天数
DateSelector.prototype.InitDaySelect = function()
{
// 使用parseInt函数获取当前的年份和月份
var year = parseInt(this.selYear.value);
var month = parseInt(this.selMonth.value);
// 获取当月的天数
var daysInMonth = DateSelector.DaysInMonth(year, month);
// 清空原有的选项
this.selDay.options.length = 0;
// 循环添加OPION元素到天数select对象中
for(var i = 1; i <= daysInMonth ; i++)
{
// 新建一个OPTION对象
var op = 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)
{
var selector = 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>
<select id="selYear"></select>
<select id="selMonth"></select>
<select id="selDay"></select>
<script type="text/javascript">
var selYear = window.document.getElementById("selYear");
var selMonth = window.document.getElementById("selMonth");
var selDay = window.document.getElementById("selDay");
// 新建一个DateSelector类的实例，将三个select对象传进去
new DateSelector(selYear, selMonth ,selDay, 2004, 2, 29);
// 也可以试试下边的代码
// var dt = new Date(2004, 1, 29);
// new DateSelector(selYear, selMonth ,selDay, dt);
</script>
</body>
</html>
分享到：
相关推荐
JavaScript日历控件是网页开发中常用的一种交互元素，它能帮助用户方便地选择日期，常见于表单输入、事件安排或时间相关的功能。在给定的资源中，包含了六种不同样式的JavaScript日历，这些日历可能具有不同的设计...
JavaScript日历是一种常见的网页交互元素，它用于展示日期并允许用户选择特定的日期。在网页开发中，JavaScript日历通常与jQuery库结合使用，因为jQuery提供了丰富的DOM操作和动画效果，使得日历插件的实现更加简洁...
在这个“完美javascript日历大集合”中，我们可能会遇到一系列使用JavaScript实现的创新日历组件，这些组件可能包括各种设计风格、功能特性和适应性，旨在提升用户体验并增强网站的互动性。 日历组件是网页中常见的...
JavaScript日历是一款完全使用原生JavaScript编写的日历组件，它体现了JavaScript在前端开发中的强大功能，无需依赖任何外部库如Vue或jQuery。这个组件允许用户进行上下翻页以查看不同月份的日历，并且支持点击特定...
JavaScript日历控件是网页开发中常用的一种交互元素，它为用户提供了一个直观的方式来选择日期，常见于表单、事件管理或在线预订系统等场景。在本文中，我们将深入探讨六种不同的JavaScript日历控件，了解它们的特点...
JavaScript日历是一个常见的网页交互元素，它为用户提供了一个方便的方式来选择日期，常见于表单填写、事件安排等场景。在Web开发中，JavaScript日历组件的实现主要依赖于JavaScript语言和CSS来完成页面布局和样式...
JavaScript日历组件是一种在网页上实现交互式日期选择功能的工具，它允许用户方便地查看和选择日期，常用于表单填写、事件预订或者时间安排等场景。在本案例中，我们有两个关键文件：`jscalendarx.htm` 和 `...
JavaScript日历插件是一种网页应用程序中的交互式组件，它允许用户在网页上选择或输入日期和时间。这种插件通常由JavaScript代码实现，利用浏览器的DOM（文档对象模型）进行操作，提供用户友好的界面来处理日期选择...
JavaScript日历是网页开发中常用的一种交互元素，用于展示日期并提供用户选择日期的功能。在网页设计中，美观且易用的日历控件能够提升用户体验，使得数据输入更加直观便捷。这里我们关注的是一个个人收藏的...
【标题】"日文版javascript日历"是一个专门针对日语环境设计的JavaScript日历控件，它提供了方便的日历显示和交互功能，尤其适用于需要日文日期展示的Web应用程序。这个控件不仅包含了完整的日历功能，还带有详细的...
“有点FLASH般的闪亮效果”则暗示了这个JavaScript日历可能采用了类似早期FLASH技术中的动态光照、渐变或者透明效果，来达到吸引用户注意力并提升网页互动性目的。这样的日历组件在网页设计中可以用于日期选择、事件...
JavaScript日历控件是网页开发中的一个重要组成部分，它为用户提供了一种直观且用户友好的方式来选择日期。Tigra Calendar是一款广泛使用的跨浏览器JavaScript日历控件，它以其弹出式的显示方式而受到青睐。在本文中...