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 相关文章推荐
InnerHtml和InnerText的区别分析
Mar 13 Javascript
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 Javascript
Node.js模拟浏览器文件上传示例
Mar 26 Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 Javascript
JS中的form.submit()不能提交表单的错误原因
Oct 08 Javascript
详解javascript事件冒泡
Jan 09 Javascript
利用jQuery对无序列表排序的简单方法
Oct 16 Javascript
ReactJs快速入门教程(精华版)
Nov 28 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
Dec 27 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
浅谈element中InfiniteScroll按需引入的一点注意事项
Jun 05 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
Zend Framework中的简单工厂模式 图文
2012/07/10 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
PHP智能识别收货地址信息实例
2019/01/05 PHP
JavaScript实际应用:innerHTMl和确认提示的使用
2006/06/22 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
2016/02/23 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
2017/09/19 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
详解如何在Vue项目中发送jsonp请求
2019/10/25 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
国内常用的js类库大全(CDN公共库)
2020/06/24 Javascript
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
python如何将图片转换为字符图片
2020/08/19 Python
对numpy中array和asarray的区别详解
2018/04/17 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
Tensorflow 定义变量,函数,数值计算等名字的更新方式
2020/02/10 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
python获取linux系统信息的三种方法
2020/10/14 Python
matplotlib教程——强大的python作图工具库
2020/10/15 Python
Jupyter Notebook添加代码自动补全功能的实现
2021/01/07 Python
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
慰问敬老院活动总结
2014/04/26 职场文书
小学生感恩父母演讲稿
2014/08/28 职场文书
三峡大坝导游词
2015/01/31 职场文书
美术教师求职信范文
2015/03/20 职场文书
证婚人致辞精选
2015/07/28 职场文书
环保建议书作文300字
2015/09/14 职场文书
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python