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 21 Javascript
对比分析json及XML
Nov 28 Javascript
node.js中的fs.realpathSync方法使用说明
Dec 16 Javascript
使用console进行性能测试
Apr 27 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 Javascript
JavaScript简单生成 N~M 之间随机数的方法
Jan 13 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 Javascript
Angular2 父子组件数据通信实例
Jun 22 Javascript
vue.js todolist实现代码
Oct 29 Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 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导入导出Excel代码
2015/07/07 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
use jscript with List Proxy Server Information
2007/06/11 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
JS跨域总结
2012/08/30 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
jQuery 选择同时包含两个class的元素的实现方法
2016/06/01 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
详解js静态资源文件请求的处理
2017/08/01 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
2018/12/19 Javascript
Vue起步(无cli)的啊教程详解
2019/04/11 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
pycharm 使用心得(六)进行简单的数据库管理
2014/06/06 Python
Python复制目录结构脚本代码分享
2015/03/06 Python
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
Python中使用pypdf2合并、分割、加密pdf文件的代码详解
2019/05/21 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
Pycharm创建项目时如何自动添加头部信息
2019/11/14 Python
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
顺丰快递Java软件工程师面试题
2015/07/31 面试题
校园歌咏比赛主持词
2014/03/18 职场文书
优秀教导主任事迹材料
2014/05/09 职场文书
销售人员求职信
2014/07/22 职场文书
大学推普周活动总结
2015/05/07 职场文书
小学运动会入场词
2015/07/18 职场文书