js实现日期级联效果

 更新时间:2014年01月23日 10:07:22   作者:  
本篇文章主要是对js实现日期级联效果的实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助

复制代码 代码如下:

    <div>
        <select name="YYYY" onchange="YYYYMM(this.value)">
            <option value="">请选择 年</option>
        </select>
        <select name="MM" onchange="MMDD(this.value)">
            <option value="">选择 月</option>
        </select>
        <select name="DD">
            <option value="">选择 日</option>
        </select>
    </div>

    <script language="JavaScript">
        function window.onload() {
            strYYYY = document.form1.YYYY.outerHTML;
            strMM = document.form1.MM.outerHTML;
            strDD = 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 - 30); i < (y + 30); i++) //以今年为准,前30年,后30年
            {
                str += "<option value='" + i + "'> " + i + " 年" + "</option>\r\n";
            }
            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";
            }
            document.form1.MM.outerHTML = str + "</select>";

            document.form1.YYYY.value = y;
            document.form1.MM.value = new Date().getMonth() + 1;
            var n = MonHead[new Date().getMonth()];
            if (new Date().getMonth() == 1 && IsPinYear(YYYYvalue)) n++;
            writeDay(n); //赋日期下拉框
            document.form1.DD.value = new Date().getDate();
        }

        function YYYYMM(str) //年发生变化时日期发生变化(主要是判断闰平年)
        {
            var MMvalue = 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 = 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";
            document.form1.DD.outerHTML = s + "</select>";
        }

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

相关文章

  • 浅析JavaScript 调试方法和技巧

    浅析JavaScript 调试方法和技巧

    本文给大家浅析javascript调试方法和技巧,涉及到javascript调试方法和技巧方面的知识,本文介绍的非常详细,非常具有参考借鉴介绍,感兴趣的朋友一起看看吧
    2015-10-10
  • bootstrap+jQuery实现的动态进度条功能示例

    bootstrap+jQuery实现的动态进度条功能示例

    这篇文章主要介绍了bootstrap+jQuery实现的动态进度条功能,结合完整实例形式分析了bootstrap+jQuery实现动态进度条的具体步骤与相关操作技巧,需要的朋友可以参考下
    2017-05-05
  • Bootstrap Table使用方法解析

    Bootstrap Table使用方法解析

    这篇文章主要为大家详细介绍了JS组件Bootstrap Table使用方法,具有一定的实用性和参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • Layui多选只有最后一个值的解决方法

    Layui多选只有最后一个值的解决方法

    今天小编就为大家分享一篇Layui多选只有最后一个值的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JS精确判断数据类型代码实例

    JS精确判断数据类型代码实例

    这篇文章主要介绍了JS精确判断数据类型代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • JavaScript伸缩的菜单简单示例

    JavaScript伸缩的菜单简单示例

    伸缩的菜单,想必大家都有见到过吧,实现方法也是很多的,在接下来的文章中为大家介绍下使用js是如何实现的,需要的朋友可以参考下
    2013-12-12
  • 解决eclipse中没有js代码提示的问题

    解决eclipse中没有js代码提示的问题

    今天小编就为大家分享一篇解决eclipse中没有js代码提示的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • 微信小程序实现点击效果

    微信小程序实现点击效果

    这篇文章主要为大家详细介绍了微信小程序实现点击效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-06-06
  • JS数组方法push()、pop()用法实例分析

    JS数组方法push()、pop()用法实例分析

    这篇文章主要介绍了JS数组方法push()、pop()用法,结合实例形式分析了JavaScript数组push()与pop()方法基本功能、原理、使用方法与操作注意事项,需要的朋友可以参考下
    2020-01-01
  • JavaScript实现模仿桌面窗口的方法

    JavaScript实现模仿桌面窗口的方法

    这篇文章主要介绍了JavaScript实现模仿桌面窗口的方法,可实现模仿桌面窗口的打开、关闭、移动、缩放及最大化、最小化等功能,需要的朋友可以参考下
    2015-07-07

最新评论