年月日 生日 js插件 

<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <form id="form1">
        <div>
            <select name=YYYY id="YYYY" onchange="YYYYMM(this.value)">
                <option value="">选择 年</option>
            </select>
            <select name=MM id="MM" onchange="MMDD(this.value)">
                <option value="">选择 月</option>
            </select>
            <select name=DD id="DD">
                <option value="">选择 日</option>
            </select>
        </div>
        <input id="hfValue" />
        <button id="btnSave" text="保存" onclick="btnSave_Click()"></button>
    </form>
</body>
</html>
<script language="JavaScript">
    function getValue() {
        var year = document.getElementById("YYYY").options[document.getElementById("YYYY").selectedIndex].value;
        var month = document.getElementById("MM").options[document.getElementById("MM").selectedIndex].value;
        var day = document.getElementById("DD").options[document.getElementById("DD").selectedIndex].value;
        document.getElementById("hfValue").value = year + "-" + month + "-" + day;
    }

    window.onload = function () {
        strYYYY = $('#YYYY').prop('outerHTML');// document.form1.YYYY.outerHTML;
        strMM = $('#MM').prop('outerHTML');//document.form1.MM.outerHTML;
        strDD = $('#DD').prop('outerHTML');//document.form1.DD.outerHTML;
        MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        //先给年下拉框赋内容
        var y = new Date().getFullYear();
        var str = strYYYY.substring(0, strYYYY.length - 9);

        for (var i = (y - 80) ; i < (y + 2) ; i++) //以今年为准，前30年，后30年
        {
            str += "<option value='" + i + "'> " + i + " 年" + "</option>\r\n";
        }
        $('#YYYY').prop('outerHTML', str + "</select>") //document.form1.YYYY.outerHTML = str + "</select>";
        //赋月份的下拉框
        var str = strMM.substring(0, strMM.length - 9);
        for (var i = 1; i < 13; i++) {
            str += "<option value='" + i + "'> " + i + " 月" + "</option>\r\n";
        }
        $('#MM').prop('outerHTML', str + '</select>') // document.form1.MM.outerHTML = str + "";
        $('#MM').val(y);
        $('#MM').val(new Date().getMonth() + 1); //document.form1.MM.value = new Date().getMonth() + 1;
        var n = MonHead[new Date().getMonth()];
        if (new Date().getMonth() == 1 && IsPinYear(YYYYvalue)) n++;
        writeDay(n); //赋日期下拉框
        $('#DD').val(new Date().getDate());// document.form1.DD.value = new Date().getDate();
    }
    function YYYYMM(str) //年发生变化时日期发生变化(主要是判断闰平年)
    {
        var MMvalue = $("#MM").val();//document.form1.MM.options[document.form1.MM.selectedIndex].value;
        if (MMvalue == "") {
            DD.outerHTML = strDD;
            return;
        }
        var n = MonHead[MMvalue - 1];
        if (MMvalue == 2 && IsPinYear(str)) n++;
        writeDay(n)
    }
    function MMDD(str) //月发生变化时日期联动
    {
        var YYYYvalue = $("#YYYY").val();// document.form1.YYYY.options[document.form1.YYYY.selectedIndex].value;
        if (str == "") {
            DD.outerHTML = strDD;
            return;
        }
        var n = MonHead[str - 1];
        if (str == 2 && IsPinYear(YYYYvalue)) n++;
        writeDay(n)
    }
    function writeDay(n) //据条件写日期的下拉框
    {
        var s = strDD.substring(0, strDD.length - 9);
        for (var i = 1; i < (n + 1) ; i++) s += "<option value='" + i + "'> " + i + " 日" +

    "</option>\r\n";
        $('#DD').prop('outerHTML', s + "</select>");  //document.form1.DD.outerHTML = s + "</select>";

    }
    function IsPinYear(year) //判断是否闰平年
    {
        return (0 == year % 4 && (year % 100 != 0 || year % 400 == 0))
    }

</script>

 

posted @ 2016-03-07 10:52  混世小郎君  阅读(586)  评论(0)  编辑  收藏  举报