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 StringBuilder类实现
Dec 22 Javascript
javascript 获取select下拉列表值的代码
Sep 07 Javascript
javascript自定义startWith()和endWith()的两种方法
Nov 11 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 Javascript
用Fundebug插件记录网络请求异常的方法
Feb 21 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
Apr 29 Javascript
JavaScript中继承原理与用法实例入门
May 09 Javascript
微信小程序转化为uni-app项目的方法示例
May 22 Javascript
vuejs实现下拉框菜单选择
Oct 23 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在线打包下载功能示例
2016/10/15 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
2012/06/18 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
2014/08/07 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
如何运行Python程序的方法
2013/04/21 Python
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
CentOS 7下安装Python3.6 及遇到的问题小结
2018/11/08 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
Python网页解析器使用实例详解
2020/05/30 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
美术师范毕业生自荐信
2013/11/16 职场文书
《孔子拜师》教学反思
2014/02/24 职场文书
搞笑爱情保证书
2014/04/29 职场文书
文明生主要事迹
2014/05/25 职场文书
未婚证明书模板
2014/10/08 职场文书
Python基础教程,Python入门教程(超详细)
2021/06/24 Python
java解析XML详解
2021/07/09 Java/Android
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js
html中两种获取标签内的值的方法
2022/06/16 jQuery