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 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
Mar 26 Javascript
javascript 处理事件绑定的一些兼容写法
Dec 24 Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
jquery sortable的拖动方法示例详解
Jan 16 Javascript
BootStrap的Datepicker控件使用心得分享
May 25 Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 Javascript
JS实现的简易拖放效果示例
Dec 29 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
Jul 30 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
node.js中fs文件系统模块的使用方法实例详解
Feb 13 Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 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 preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
据说是雅虎的一份PHP面试题附答案
2009/01/07 PHP
php开启安全模式后禁用的函数集合
2011/06/26 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
2015/03/24 Javascript
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
AngularJS报错$apply already in progress的解决方法分析
2017/01/30 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
Python实现高效求解素数代码实例
2015/06/30 Python
简介二分查找算法与相关的Python实现示例
2015/08/26 Python
Python中的条件判断语句基础学习教程
2016/02/07 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例
2019/01/23 Python
python交易记录整合交易类详解
2019/07/03 Python
解决yum对python依赖版本问题
2019/07/05 Python
python基于Selenium的web自动化框架
2019/07/14 Python
使用Python函数进行模块化的实现
2019/11/15 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
Python龙贝格法求积分实例
2020/02/29 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
python中pdb模块实例用法
2021/01/15 Python
汽车检测与维修个人求职信
2013/09/24 职场文书
学生检讨书范文
2015/01/27 职场文书
2015年文员个人工作总结
2015/04/09 职场文书
pytorch--之halfTensor的使用详解
2021/05/24 Python
详解如何用Python实现感知器算法
2021/06/18 Python
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL