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 相关文章推荐
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
Nov 30 Javascript
javascript eval(func())使用示例
Dec 05 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
jquery实现定时自动轮播特效
Dec 10 Javascript
Angularjs手动解析表达式($parse)
Oct 12 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
微信小程序实现全国机场索引列表
Jan 31 Javascript
element-ui 限制日期选择的方法(datepicker)
May 16 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
Jun 10 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
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 iis5下安装php4.0+mysql之我见
2006/10/09 PHP
php实现通过soap调用.Net的WebService asmx文件
2017/02/27 PHP
php头像上传预览实例代码
2017/05/02 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
PHP+Redis开发的书签案例实战详解
2019/07/09 PHP
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
Dom在ajax技术中的作用说明
2010/10/25 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
实例详解jQuery的无new构建
2016/08/02 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
解决ie img标签内存泄漏的问题
2017/10/13 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
Vue 组件的挂载与父子组件的传值实例
2020/09/02 Javascript
jQuery实现查看图片功能
2020/12/01 jQuery
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
Python实现partial改变方法默认参数
2014/08/18 Python
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
Python实现爬取逐浪小说的方法
2015/07/07 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
python实现音乐下载的统计
2018/06/20 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
Pytorch的mean和std调查实例
2020/01/02 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
TensorFlow实现从txt文件读取数据
2020/02/05 Python
英国皇室御用百货:福南梅森(Fortnum & Mason)
2017/12/03 全球购物
幼儿园中班上学期评语
2014/04/18 职场文书
病人慰问信范文
2015/02/15 职场文书
初中班主任教育随笔
2015/08/15 职场文书