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的parseInt 进制问题
May 07 Javascript
JS Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
javascript预加载图片、css、js的方法示例介绍
Oct 14 Javascript
利用Keydown事件阻止用户输入实现代码
Mar 11 Javascript
Jquery对象和Dom对象的区别分析
Nov 20 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
Mar 01 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 Javascript
js new Date()实例测试
Oct 31 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
Apr 17 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 和 MySQL 基础教程(一)
2006/10/09 PHP
生成随机字符串和验证码的类的PHP实例
2013/12/24 PHP
教你在PHPStorm中配置Xdebug
2015/07/27 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
PHP从零开始打造自己的MVC框架之类的自动加载实现方法详解
2019/06/03 PHP
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
2013/11/22 Javascript
jQuery实现图片轮播特效代码分享
2015/09/15 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
2017/07/23 Javascript
解决vue-router中的query动态传参问题
2018/03/20 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
2019/11/01 Javascript
Python实现购物车功能的方法分析
2017/11/10 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
python实现的批量分析xml标签中各个类别个数功能示例
2019/12/30 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
python爬虫容易学吗
2020/06/02 Python
Python如何读取、写入JSON数据
2020/07/28 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
介绍一下Java的安全机制
2012/06/28 面试题
高中生毕业学习总结的自我评价
2013/11/14 职场文书
大学生活动策划方案
2014/02/10 职场文书
公司总经理工作职责管理办法
2014/02/28 职场文书
水电站项目建议书
2014/05/12 职场文书
中学语文教学反思
2016/02/16 职场文书
golang goroutine顺序输出方式
2021/04/29 Golang
Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高
2021/08/23 MySQL