实现一个日期下拉菜单

这篇文章的主旨是弄清楚如何根据实际需求实现一个联动菜单以及联动菜单的原理，实例是实现一个日期选择下拉菜单。本文调试环境为IE6/firefox1.5。

首先来分析一下日期下拉菜单的需求。建议大家在写任何程序的时候都应该在动手编程之前想清楚自己需要些什么，这样编程才有效率。

年份： 一般来说有一个有效年份，比如说1900年至当前年份才是为效的，这个要根据实际需求来确定，如果是该下拉菜单是用来选择出生年月日还得把最大的年份减到一定的数目，如果有人的生日选择了2005年（即当前的年份），那是不正常的。

月份：没有什么特殊需求，不管是哪一年都是有十二个月。

天数：每个月的天数都可能是不定的，当然这可以根据一定的算法求出来，而它的根据就是当前选择的年份和月份。月份都有一个固定的天数，即一、三、五、七、八、十、十二月是三十一天，而四、六、九、十一月是三十天，二月份要根据当年是否为闰年判断是二十八天还是二十九天。求当月的天数我提出一个比较简单的算法，可以只根据当前的年份和月份就可以求出当月的天数，这会在后边讲一讲思路并将其实现。

好了，现在我们来具体实现这个日期联动下拉菜单。

联动下拉菜单是以两个或多个select元素为单位的，为了让这些菜单更多紧密的工作，我们可以实现一个类用来管理它们的初始化、事件，在这里就使用DateSelector为类名，它有三个属性，分别为年、月、日的下拉菜单，而这三个select元素是由构造函数的参数传进来的，另外为了更灵活地使用它，我们还可以再给DateSelector类的构造函数增加一个（Date对象）或三个参数(int数值)，表示初始化的年月日。由于参数个数不定，我们可以不将另外增加的参数写入参数表里，而是在运行时判断arguments对象的length属性来执行不同的操作。arguments对象存储了当前函数的参数信息，可以查阅一下相关的资料比如说《Windows脚本技术》。

<html>

接下来开始对联动菜单进行初始化，首先是年份，我们可以给类增加一个MinYear属性表示最小的年份，再增加一个MaxYear表示最大的年份，实现一个InitYearSelect方法初始化年份，实现一个InitMonthSelect方法初始化月份。由于这几个属性和方法的思路都是很简单，就不一一讲解，看看代码是怎么写的应该就能够明白，如果对类方面有不清楚有地方可以参考我发表在无忧脚本另一篇文章《由浅到深了解JavaScript类》。

<html>

// 增加一个最大年份的属性
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);
    }
}
</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);
</script>
</body>
</html>

接下来要对天数进行初始化了，前边有说过天数是不定的，那要如何准确求出它的天数呢？我们稍加分析就知道每个月的最后一天就是该月的天数，相当于下一个月的第一天的前一天，比如说我们要求2005年11月的天数，那我们只需要得到2005年12月一日的前一天即可得到2005年11月最后一天。可以给DateSelector添加一个方法DaysInMonth来实现该功能。

<html>

// 增加一个最大年份的属性
DateSelector.prototype.MinYear = 1900;

// 增加一个最大年份的属性
DateSelector.prototype.MaxYear = (new Date()).getFullYear();

// 根据年份与月份获取当月的天数
DateSelector.DaysInMonth = function(year, month)
{
var date = new Date(year, month, 0);
return date.getDate();
}
</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);
alert("2004年2月的天数为" + DateSelector.DaysInMonth(2004, 2));
alert("2005年2月的天数为" + DateSelector.DaysInMonth(2005, 2));
</script>
</body>
</html>

很明显，这种方法根本不需要考虑到该年份是否为闰年就可以轻松求出指定月的天数。另外，有些网友可能会对“var date = new Date(year, month, 0);”这句代码觉得奇怪，传入的是2005,2,0，这看起来似乎是求二月份第一天的前一天即一月份的最后一天，为什么还会得到二月份的天数？这里必须说明一天，JavaScript的Date对象里的月份是由0开始到11结束，也就是说0表示一月，2表示三月，所以就有这种错觉，在使用JavaScript的Date对象时要特别注意这一点。

好了，天数的算法也解决了，那么我们可以轻松写出一个InitDaySelect方法来初始化天数了，在这个方法里要根据当前年份下拉菜单和月份下拉菜单的值算出该月的天数，由于天数是变动的，因此我们在该方法里也可事先清空天数下拉菜单的内容。

<html>

// 增加一个最大年份的属性
DateSelector.prototype.MinYear = 1900;

// 增加一个最大年份的属性
DateSelector.prototype.MaxYear = (new Date()).getFullYear();

// 根据年份与月份获取当月的天数
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);
    }
}
</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);
</script>
</body>
</html>

现在已经写好几个方法用来初始化三个下拉菜单的选项了，我们需要做的是让它们结合并动起来。如果年份或月份有变动，那么应该重新计算天数并且重新初始化天数，这可以通过selYear和selMonth的onchange来实现。由于这三个下拉菜单是要紧密联动的，因此特地给它们增加一个属性Selector，值为当前的DateSelector实例。同时实现selYear和selMonth的onchange，如果发生onchange则调用InitDaySelect重新初始化selDay下拉菜单。

<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.InitYearSelect();
    this.InitMonthSelect();
    this.InitDaySelect();
    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);
    }
}

// 增加一个最大年份的属性
DateSelector.prototype.MinYear = 1900;

// 增加一个最大年份的属性
DateSelector.prototype.MaxYear = (new Date()).getFullYear();

// 根据年份与月份获取当月的天数
DateSelector.DaysInMonth = function(year, month)
{
var date = new Date(year, month, 0);
return date.getDate();
}

// 处理年份和月份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();
}
</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);
</script>
</body>
</html>

到此为止我们已经基本实现DateSelector类要提供的功能了，为了更灵活地控制它，我们应该给它增加设定初始值的功能。一般来说有两种需求，第一种是传入一个Date对象，第二种是传入三个值分别表示年、月、日，也就是说我们必须重载构造函数，形式如下：

function DateSelector(selYear, selMonth, selDay)
function DateSelector(selYear, selMonth, selDay, date)
function DateSelector(selYear, selMonth, selDay, year, month, day)

当然，JavaScript没有重载的概念，但我们可以给它模拟出来，方法就是根据传入参数的个数（即arguments对象的length）以及类型来判断，这需要对原有的构造函数进行一定的改动使之更模块化地实现这三种情况。由于年份和月份是固定不变的，参数只会改变selYear和selMonth的已选选项，而selDay则要根据selYear和selMonth的值再动态生成，因此我们将初始化菜单代码再提出来写一个InitSelector方法里，它有三个参数，分别是year, month, day，功能是根据这三个参数来生成相应的菜单选项，我们这次调试使用2004年2月29日为初始值。要设置初始值的时候一般我们会循环访问option的值，但这里情况特殊，我们是可以根据一定的计算来得到默认选择的option的下标的。

年份下标 = MaxYear - year
月份下标 = month - 1
天数下标 = day - 1

<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.DaysInMonth = function(year, month)
{
var date = new Date(year, month, 0);
return date.getDate();
}

// 根据参数初始化下拉菜单选项
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>

好了，日期下拉菜单已经能够如我们想象的那样开始工作了，在调用的时候我们只需要执行new DateSelector(selYear, selMonth ,selDay, 2004, 2, 29);就可以，而且它内部关系紧密，你同一个页面可以同时运行好几组日期下拉菜单而互不影响，这也是我要采用类的形式而不是采用一组函数来实现的缘由了，我以后写的文章也会尽可能采用类的形式，这样写出来的代码使用起来会更加方便。像以往一样，我也得说88啦，希望大家能够继续支持无忧脚本的原创文章，并且踊跃参与到其中来。

posted on 2008-10-13 17:50 小卓阅读(435) 评论(0) 编辑收藏所属分类: html and js

新用户注册刷新评论列表


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻知识库 C++博客博问管理
相关文章: 对比 javascript url编码 escape(), encodeURL(), encodeURIComponent() 区别 javascript关闭窗口（兼容firefox，IE） http协议状态码的含义及解决方法 Javascript实现评估用户输入密码的强度常备JS操作神奇的代码 frameset使用技巧正则表达式过滤HTML危险脚本 CSS滤镜简要 div的定位问题

table

实现一个日期下拉菜单

My Links

Blog Stats

常用链接

留言簿(2)

我参与的团队

随笔档案

文章分类

文章档案

搜索

最新评论