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中执行任意html代码的方法示例解读
Dec 25 Javascript
判断浏览器的内核及版本号方法汇总
Jan 05 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
Mar 31 Javascript
js编写贪吃蛇的小游戏
Aug 24 Javascript
干货分享:让你分分钟学会javascript闭包
Dec 25 Javascript
jquery+ajax实现省市区三级联动效果简单示例
Jan 04 Javascript
bootstrap css样式之表单
Jan 19 Javascript
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
React和Vue中监听变量变化的方法
Nov 14 Javascript
Vue注册组件命名时不能用大写的原因浅析
Apr 25 Javascript
小程序云开发教程如何使用云函数实现点赞功能
May 18 Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 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生成过去100年下拉列表的方法
2015/07/20 PHP
详解PHP中mb_strpos的使用
2018/02/04 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
Angularjs 创建可复用组件实例代码
2016/10/09 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
python使用psutil模块获取系统状态
2016/08/27 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
使用TFRecord存取多个数据案例
2020/02/17 Python
Python使用Paramiko控制liunx第三方库
2020/05/20 Python
python 基于opencv 绘制图像轮廓
2020/12/11 Python
售后专员岗位职责
2013/12/08 职场文书
应届大学生简历中的自我评价
2014/01/15 职场文书
劳动模范事迹材料
2014/01/19 职场文书
团日活动总结书格式
2014/05/08 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
董事长助理岗位职责
2015/02/11 职场文书
小英雄雨来观后感
2015/06/09 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle