JavaScript日期下拉菜单

Posted on 2009-12-23 by tunpishuang

来自http://tunps.com/javascript-date-menu

百度知道有人提问：如题：有三个下拉列表，分别为年，月，日。年和月的好实现，循环即可。但是天数却要根据年和月来定。循环次数要看条件。怎样实现这样的代码。期待解决…… 于是就花了一下午的时间弄了一个：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.||g/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.||g/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript年月日下拉菜单</title>
</head>
 
<body>
<div id="cc">
<h1><a href="">JavaScript年月日下拉菜单</a></h1>
</div>
<div id="date_select||">
    <select id="year">
    </select>年
    <select id="month">
    </select>月
    <select id="day">
    </select>日
</div>
<script>
//code by tunpishuang at gmail dot com
//2009.12.23
yearList=document.getElementById("year");
monthList=document.getElementById("month");
dayList=document.getElementById("day");
date={
    init:function(fromYear,toYear,fromMonth,toMonth)
    {
        date.genYear(fromYear,toYear);
        date.genMonth(fromMonth,toMonth);
        if(window.addEventListener)
        {
            yearList.addEventListener('change',date.genDay,false);
            monthList.addEventListener('change',date.genDay,false);
        }
        else
        {
            yearList.attachEvent('onchange',date.genDay);
            monthList.attachEvent('onchange',date.genDay);
        }
    },
    isLeapYear:function(year)
    {
        if ((year%400==0) || (year%100!=0) && (year%4==0))
        {
            return 1;
        }
        else
            return 0;
    },
    genYear:function(from,to)
    {
        //generate year
        if(from > to){return};
        for(i=0;from< =to;i++,from++)
        {
            yearList.options[i]=new Option(from,from);
        }
    },
    genMonth:function(from,to)
    {
        //generate monther
        for(i=0;from<=to;i++,from++)
        {
            monthList.options[i]=new Option(from,from);
        }
    },
    genDay:function()
    {
        //generate days according to year and month
        if(!(yearList.options.selectedIndex > -1)) return;
            yearSelected=yearList.options[yearList.options.selectedIndex].text;
        if(!(monthList.options.selectedIndex > -1)) return;
            monthSelected=monthList.options[monthList.options.selectedIndex].text;
        //if dayList.options then remove all options
        if(dayList.options)
        {
            for(i=0;i<daylist .options.length;i++)
            {
                dayList.options[i]=null;
            }
        }
        if(monthSelected==1 || monthSelected==3 || monthSelected==5 || monthSelected==7 || monthSelected==8 || monthSelected==10 || monthSelected==12)
        {
            for(i=0;i<31;i++)
            {
                dayList.options[i]=new Option(i+1,i+1);
            }
        }
        else if(monthSelected==4 || monthSelected==6 || monthSelected==9 || monthSelected==11)
        {
            for(i=0;i<30;i++)
            {
                dayList.options[i]=new Option(i+1,i+1);
            }
        }
        else //Feburary
        {
            if(date.isLeapYear(yearSelected))
            {
                for(i=0;i<29;i++)
                {
                    dayList.options[i]=new Option(i+1,i+1);
                }
            }
            else
            {
                for(i=0;i<28;i++)
                {
                    dayList.options[i]=new Option(i+1,i+1);
                }
            }
        }
    }
}
window.onload=date.init(1900,2100,1,12);
</script>
</daylist></script></body>
</html>

——- 解释一下。重点是根据年和月生成适合大小的日子，一般情况是日期最大可以是30，31，这个根据月份来判断。还有比较特殊的二月，需要判断是不是闰年，如果是那么2月有29天，不是闰年有28天。整个程序封装为一个date对象，通过init方法初始化，参数为需要显示年的跨度和月的跨度。

About tunpishuang

just 4 fun·····

View all posts by tunpishuang →

This entry was posted in 未分类 and tagged javascript. Bookmark the permalink.

发表评论取消回复