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 相关文章推荐
window.open()弹出居中的窗口
Feb 01 Javascript
javascript 硬盘序列号+其它硬件信息
Dec 23 Javascript
js下用eval生成JSON对象
Sep 17 Javascript
Node.js实现的简易网页抓取功能示例
Dec 05 Javascript
jQuery中add()方法用法实例
Jan 08 Javascript
分享纯手写漂亮的表单验证
Nov 19 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
js本地图片预览实现代码
Oct 09 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
Mar 28 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
微信小程序实现pdf、word等格式文件上传的方法
Sep 10 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
WINDOWS服务器安装多套PHP的另类解决方案
2006/10/09 PHP
PHP通用检测函数集合
2006/11/25 PHP
php实现可运算的验证码
2015/11/10 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
设置下载不需要倒计时cookie(倒计时代码)
2008/11/19 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
JavaScript取得gridview中获取checkbox选中的值
2017/07/24 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
Flask框架配置与调试操作示例
2018/07/23 Python
Python语法分析之字符串格式化
2019/06/13 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
详解python中的模块及包导入
2019/08/30 Python
Django 创建后台,配置sqlite3教程
2019/11/18 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
教育学专业毕业生的自我评价
2013/11/21 职场文书
求职自荐书范文
2013/12/04 职场文书
18岁生日感言
2014/01/12 职场文书
优秀教师演讲稿
2014/05/06 职场文书
商场开业庆典策划方案
2014/06/02 职场文书
男性健康日的活动方案
2014/08/18 职场文书
2015年新教师工作总结
2015/04/28 职场文书
搞笑结婚保证书
2015/05/08 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
Python合并多张图片成PDF
2021/06/09 Python
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS