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 相关文章推荐
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
Oct 24 Javascript
非常好用的JsonToString 方法 简单实例
Jul 18 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
Nov 07 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
Js实现自定义右键行为
Mar 26 Javascript
JavaScript中split() 使用方法汇总
Apr 17 Javascript
SWFUpload多文件上传及文件个数限制的方法
May 31 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
关于vue-resource报错450的解决方案
Jul 24 Javascript
react 父子组件之间通讯props
Sep 08 Javascript
js实现简单掷骰子效果
Oct 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 静态页面中显示动态内容
2009/08/14 PHP
php 无法载入mysql扩展
2010/03/12 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
bootstrap选项卡扩展功能详解
2017/06/14 Javascript
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
基于vue配置axios的方法步骤
2017/11/09 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
2018/01/24 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
[01:07:17]EG vs Optic Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
为python设置socket代理的方法
2015/01/14 Python
Python的网络编程库Gevent的安装及使用技巧
2016/06/24 Python
python读取excel表格生成erlang数据
2017/08/26 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
django2 快速安装指南分享
2018/01/05 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
Python控制键盘鼠标pynput的详细用法
2019/01/28 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
完美实现CSS垂直居中的11种方法
2021/03/27 HTML / CSS
小学教学随笔感言
2014/02/26 职场文书
大学生英文求职信范文
2015/03/19 职场文书
2015年教师党员承诺书
2015/04/27 职场文书
大学生求职意向书
2015/05/11 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
爱国教育主题班会
2015/08/14 职场文书
Nginx动静分离配置实现与说明
2022/04/07 Servers
零基础学java之循环语句的使用
2022/04/10 Java/Android