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]点出统计器
Oct 11 Javascript
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
Jan 19 Javascript
js的hasownproperty使用示例
Mar 02 Javascript
JS通过ajax动态读取xml文件内容的方法
Mar 24 Javascript
JavaScript tab选项卡插件实例代码
Feb 23 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
详解vue+vueRouter+webpack的简单实例
Jun 17 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 Javascript
Vue export import 导入导出的多种方式与区别介绍
Feb 12 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
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
如何使用PHP获取网络上文件
2006/10/09 PHP
PHP统计二维数组元素个数的方法
2013/11/12 PHP
实现在同一方法中获取当前方法中新赋值的session值解决方法
2014/06/26 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
PHP实现腾讯短网址生成api接口实例
2020/12/08 PHP
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
JavaScript实现简单的时钟实例代码
2013/11/23 Javascript
jquery插件推荐 jquery.cookie
2014/11/09 Javascript
jquery中键盘事件小结
2016/02/24 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
2016/12/08 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
Python的类实例属性访问规则探讨
2015/01/30 Python
python 中split 和 strip的实例详解
2017/07/12 Python
Python机器学习k-近邻算法(K Nearest Neighbor)实例详解
2018/06/25 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
Python使用贪婪算法解决问题
2019/10/22 Python
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
Qoo10马来西亚:全球时尚和引领潮流的购物市场
2016/08/25 全球购物
亿阳信通股份有限公司C#笔试题
2016/12/06 面试题
实习生岗位职责
2014/04/12 职场文书
先进单位事迹材料
2014/12/25 职场文书
记者节感言
2015/08/03 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
Python图像处理之图像拼接
2021/04/28 Python
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python