js实现日期级联效果


Posted in Javascript onJanuary 23, 2014
    <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和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
深入领悟JavaScript中的面向对象
Nov 18 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
javascript制作sql转换为stringBuffer的小工具
Apr 03 Javascript
JQuery中clone方法复制节点
May 18 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
微信小程序之仿微信漂流瓶实例
Dec 09 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 Javascript
面试常见的js算法题
Mar 23 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
JavaScript作用域链实例详解
Jan 21 Javascript
原生javascript中this几种常见用法总结
Feb 24 Javascript
js日期、星座的级联显示代码
Jan 23 #Javascript
js根据日期判断星座的示例代码
Jan 23 #Javascript
jQuery中Dom的基本操作小结
Jan 23 #Javascript
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 #Javascript
js验证电话号码与手机支持+86的正则表达式
Jan 23 #Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
Jan 22 #Javascript
Jquery遍历节点的方法小集
Jan 22 #Javascript
You might like
PHP设置进度条的方法
2015/07/08 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
HTML中事件触发列表与解说
2007/07/09 Javascript
统计出现最多的字符次数的js代码
2010/12/03 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
javascript正则表达式使用replace()替换手机号的方法
2015/01/19 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
JavaScript SHA-256加密算法详细代码
2016/10/06 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
IE8中jQuery.load()加载页面不显示的原因
2018/11/15 jQuery
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
基于JS实现快速读取TXT文件
2020/08/25 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
python 自动提交和抓取网页
2009/07/13 Python
Python yield 使用方法浅析
2017/05/20 Python
python使用PyQt5的简单方法
2019/02/27 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
python列表推导式操作解析
2019/11/26 Python
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
2015年元旦活动总结
2014/05/09 职场文书
奥运会口号
2014/06/13 职场文书
机械专业技术员求职信
2014/06/14 职场文书
服务标语大全
2014/06/18 职场文书
倡议书格式
2014/08/30 职场文书
护士年终考核评语
2014/12/31 职场文书
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python