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 相关文章推荐
js png图片(有含有透明)在IE6中为什么不透明了
Feb 07 Javascript
来自qq的javascript面试题
Jul 24 Javascript
jquery、js操作checkbox全选反选
Mar 12 Javascript
node.js中的fs.lchown方法使用说明
Dec 16 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
Nov 30 Javascript
js发送短信倒计时的简单实现方法
Sep 08 Javascript
javascript匀速动画和缓冲动画详解
Oct 20 Javascript
原生JS发送异步数据请求
Jun 08 Javascript
AngularJS实现tab选项卡的方法详解
Jul 05 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
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
实用函数9
2007/11/08 PHP
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
PHP获取远程图片并保存到本地的方法
2015/05/12 PHP
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
javascript 快速排序函数代码
2012/05/30 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
jQuery实现TAB选项卡切换特效简单演示
2016/03/04 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
AngularJS 2.0入门权威指南
2016/10/08 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
Vue Autocomplete 自动完成功能简单示例
2019/05/25 Javascript
layui富文本编辑器前端无法取值的解决方法
2019/09/18 Javascript
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
python pdb调试方法分享
2014/01/21 Python
使用Python绘制图表大全总结
2017/02/11 Python
python 全文检索引擎详解
2017/04/25 Python
numpy中矩阵合并的实例
2018/06/15 Python
python实现翻转棋游戏(othello)
2019/07/29 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
美国网上眼镜供应商:LEOTONY(眼镜、RX太阳镜和太阳镜)
2017/10/31 全球购物
什么是事务?事务有哪些性质?
2012/03/11 面试题
英语简历自我评价
2014/01/26 职场文书
合作投资意向书
2014/04/01 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
预备党员考察意见范文
2015/06/01 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书