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 无符号右移赋值操作
Apr 17 Javascript
Javascript 八进制转义字符(8进制)
Apr 08 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
May 07 Javascript
JavaScript加强之自定义event事件
Sep 21 Javascript
jQuery获得document和window对象宽度和高度的方法
Mar 25 Javascript
jquery实现模拟百分比进度条渐变效果代码
Oct 29 Javascript
JavaScript 函数的执行过程
May 09 Javascript
ionic隐藏tabs的方法
Aug 29 Javascript
json前后端数据交互相关代码
Sep 19 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
vue element ui validate 主动触发错误提示操作
Sep 21 Javascript
JavaScript实现简单动态表格
Dec 02 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的简易冒泡法代码分享
2012/08/28 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
js CSS操作方法集合
2008/10/31 Javascript
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
2013/05/11 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
JavaScript中的继承方式详解
2015/02/11 Javascript
jQuery简单实现隐藏以及显示特效
2015/02/26 Javascript
举例简介AngularJS的内部语言环境
2015/06/17 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
2017/11/09 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
[52:40]完美世界DOTA2联赛PWL S2 Magma vs GXR 第一场 11.29
2020/12/02 DOTA
举例区分Python中的浅复制与深复制
2015/07/02 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
python输出数学符号实例
2020/05/11 Python
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
城管综合整治方案
2014/05/01 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
2014年幼儿园个人工作总结
2014/11/10 职场文书
初中生活随笔
2015/08/15 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书
python xlwt模块的使用解析
2021/04/13 Python
SpringBoot SpringEL表达式的使用
2021/07/25 Java/Android