代码改变世界

JQuery实现日期联动

2011-02-23 19:15  轩脉刃  阅读(2960)  评论(0)  编辑  收藏  举报

实现目标：

两个日期，有下拉框：

<head>
//导入jquery地址
<script src="（Jquery地址）" language="JavaScript" type="text/javascript"></script>
<script type="text/javascript">
//startYear发生变化
function changeYear(str,isstart)
{
    var pre = "start";
    if(isstart == false)
    {
        pre = "end";
    }
    var startMonth = $(pre + "Month").value;
    if(startMonth == "")
    {
        var e = $(pre + "Month");
        optionClear(e);
        return;
    }
    var n = MonHead[startMonth - 1];
    if(startMonth == 2  && IsPinYear($(pre + "Year").value))
    {
        n++;
    }
    writeDay(n,pre);
}
function changeMonth(str,isstart)
{
    var pre = "start";
    if(isstart == false)
    {
        pre = "end";
    }
    var year = $(pre + "Year").value;
    if(year == "")
    {
        var e = $(pre + "Day");
        optionClear(e);
        return;
    }
    var n = MonHead[str - 1];
    if(str == 2 && IsPinYear($(pre + "Year")))
    {
        n++;
    }
    writeDay(n,pre);
}

function dateStart()
{
    var defaultStartY = "2011";
    var defaultStartM = "1";
    var defaultStartD = "14";

    var defaultEndY = "2011";
    var defaultEndM = "2";
    var defaultEndD = "23";
    
    MonHead = [31,28,31,30,31,30,31,31,30,31,30,31];

    var prestr = new Array("start","end");
    for(var j=0; j<2; j++)
    {
        var pre = prestr[j];
        //start 年
        var y = new Date().getFullYear();
        if(pre == "start")
        {
            //start初始选中前第10天
            var i_index = 0;
            for(var i=(y-10); i<=y; i++)
            {
                $(pre+"Year").options.add(new Option(""+i+"",i));
                if(i == defaultStartY)
                {
                    $(pre+"Year").options[i_index].selected = true;
                }
                i_index++;
            }
            
        }
        else
        {
            var i_index =0;
            for(var i=(y-5); i<=y+5; i++)
            {
                $(pre+"Year").options.add(new Option(""+i+"",i));
                if(i == defaultEndY)
                {
                    $(pre+"Year").options[i_index].selected = true;
                }
                i_index++;
            }
        }
        //start月
        defaultM = (pre == "start" ? defaultStartM : defaultEndM)
        for(var i = 1; i < 13; i++)
        {
            $(pre + "Month").options.add(new Option(""+i+"",i));
            if(i == defaultM)
            {
                $(pre + "Month").options[i-1].selected = true;
            }
        }
        //start日
        var n = MonHead[$(pre + "Month").value];
        if(new Date().getMonth == 1  && IsPinYear($(pre + "Year").value))
        {
            n++;
        }
        defaultD = (pre == "start" ? defaultStartD : defaultEndD)
        writeDay(n,pre);
        $(pre + "Day").options[defaultD-1].selected = true;
    }
}
function writeDay(n,pre)
{
    var e = $(pre + "Day");
    optionClear(e);
    for (var i=1; i<(n+1); i++)
    {
        e.options.add(new Option(""+i+"",i));
    }
}
function IsPinYear(year)
{
    return (0 == year%4 && (year%100 != 0 || year % 4 == 0));
}

function optionClear(e)
{
    for(var i=e.options.length; i>=0; i--)
    {
        e.remove(i);
    }
}
</script>
</head>
<body onload="dateStart()">
<p name="selectdate">
        从
        <select id="startYear" name="startYear" onchange="changeYear(this.value,true)">
        </select>
        年
        <select id="startMonth" name="startMonth" onchange="changeMonth(this.value,true)">
        </select>
        月
        <select id="startDay" name="startDay">
        </select>
        日
        到
        <select id="endYear" name="endYear" onchange="changeYear(this.value,false)">
        </select>
        年
        <select id="endMonth" name="endMonth" onchange="changeMonth(this.value,false)">
        </select>
        月
        <select id="endDay" name="endDay">
        </select>
        日
</p>
</body>

参考了一些代码，终于能实现了~~