<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>JS年月日三级联动下拉框日期选择代码</title>
    </head>

<body>

<form name="reg_testdate">
            <select name="YYYY" onChange="YYYYDD(this.value)">
                <option value="">请选择 年</option>
            </select>
            <select name="MM" onChange="MMDD(this.value)">
                <option value="">选择 月</option>
            </select>
            <select name="DD">
                <option value="">选择 日</option>
            </select>
        </form>

<script language="JavaScript">
            function YYYYMMDDstart() {
                MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
                //先给年下拉框赋内容   
                var y = new Date().getFullYear();
                for (var i = (y - 30); i < (y + 30); i++) //以今年为准，前30年，后30年   
                    document.reg_testdate.YYYY.options.add(new Option(" " + i + " 年", i));
                //赋月份的下拉框   
                for (var i = 1; i < 13; i++)
                    document.reg_testdate.MM.options.add(new Option(" " + i + " 月", i));
                document.reg_testdate.YYYY.value = y;
                document.reg_testdate.MM.value = new Date().getMonth() + 1;
                var n = MonHead[new Date().getMonth()];
                if (new Date().getMonth() == 1 && IsPinYear(YYYYvalue)) n++;
                writeDay(n); //赋日期下拉框Author:meizz   
                document.reg_testdate.DD.value = new Date().getDate();
            }
            if (document.attachEvent)
                window.attachEvent("onload", YYYYMMDDstart);
            else
                window.addEventListener('load', YYYYMMDDstart, false);

function YYYYDD(str) //年发生变化时日期发生变化(主要是判断闰平年)   
            {
                var MMvalue = document.reg_testdate.MM.options[document.reg_testdate.MM.selectedIndex].value;
                if (MMvalue == "") {
                    var e = document.reg_testdate.DD;
                    optionsClear(e);
                    return;
                }
                var n = MonHead[MMvalue - 1];
                if (MMvalue == 2 && IsPinYear(str)) n++;
                writeDay(n)
            }

function MMDD(str) //月发生变化时日期联动   
            {
                var YYYYvalue = document.reg_testdate.YYYY.options[document.reg_testdate.YYYY.selectedIndex].value;
                if (YYYYvalue == "") {
                    var e = document.reg_testdate.DD;
                    optionsClear(e);
                    return;
                }
                var n = MonHead[str - 1];
                if (str == 2 && IsPinYear(YYYYvalue)) n++;
                writeDay(n)
            }

function writeDay(n) //据条件写日期的下拉框   
            {
                var e = document.reg_testdate.DD;
                optionsClear(e);
                for (var i = 1; i < (n + 1); i++)
                    e.options.add(new Option(" " + i + " 日", i));
            }

function IsPinYear(year) //判断是否闰平年   
            {
                return (0 == year % 4 && (year % 100 != 0 || year % 400 == 0));
            }

function optionsClear(e) {
                e.options.length = 1;
            }
        </script>
    </body>

</html>

JS年月日三级联动下拉框日期选择代码的更多相关文章

  1. Android实现三级联动下拉框 下拉列表spinner

    Android实现(省.市.县)三级联动下拉框 下拉列表spinner 转载请注明出处: http://www.goteny.com/articles/2013/11/46.html http://w ...

  2. Web 1三级联动 下拉框 2添加修改删除 弹框

    Web  三级联动 下拉框 using System; using System.Collections.Generic; using System.Linq; using System.Web; u ...

  3. jquery+html三级联动下拉框

    jquery+html三级联动下拉框及详情页面加载时的select初始化问题   html写的三个下拉框,如下: <select name="ddlQYWZYJ" id=&q ...

  4. jquery+ligerform三级联动下拉框

    如下为ligerform里的三级联动下拉框: var formData=[ {display:,width:,space:,type:"select",group:"区域 ...

  5. 项目总结01：JSP mysql SpringMvc下中国省市县三级联动下拉框

    JSP mysql SpringMvc下中国省市县三级联动下拉框 关键词 JSP  mysql数据库  SpringMvc  ajax   Controller层  Service层  中国地区  省 ...

  6. Vue.js组件之联动下拉框

    Html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  7. JQ与AJAX 省市区三级联动下拉框

    用于初学者学习基本的联动下拉框,废话不多说,见代码 首先看控制器里的3个下拉框对应代码: public ActionResult GetProvinceList() { ProvinceReposit ...

  8. jquery+html三级联动下拉框及详情页面加载时的select初始化问题

    html写的三个下拉框,如下: <select name="ddlQYWZYJ" id="ddl_QYWZYJ" class="fieldsel ...

  9. Android实现三级联动下拉框下拉列表spinner

    原文出处:http://www.cnblogs.com/zjjne/archive/2013/10/03/3350107.html 主要实现办法:动态加载各级下拉值的适配器 在监听本级下拉框,当本级下 ...

随机推荐

  1. XML实例入门2

    工具:notepad++.VS2008(MSXML6.0) 来自msdn的例子(经过修改,因为升级到MSXML6.0,有些关键字不太一样了), 需要文件books.xml,books.vsd(博客只支 ...

  2. xtrabackup 链接不上MySQL的问题

    先看问题: [root@localhost ~]# innobackupex --user=root --password=131417 /backup InnoDB Backup Utility v ...

  3. Combotree，datebox 启用 禁用

    combotree <input type="checkbox" id="ckMonitor"></input> <input i ...

  4. 4.java.lang.NumberFormatException（数据类型转换异常）

    字符串转换为数字异常 当试图将一个String转换为指定的数字类型,而该字符串确不满足数字类型要求的格式时,抛出该异常.如现在讲字符型的数据“123456”转换为数值型数据时,是允许的. 但是如果字符 ...

  5. 接收时必须库存可处理标识为Y

    应用 Oracle Inventory 层 Level Function 函数名 Funcgtion Name RCV_RCVRCERC 表单名 Form Name RCVRCERC 说明 Descr ...

  6. 在Centos 5.x或6.x上安装RHEL EPEL Repo

    本文介绍了如何在CentOS 5.x或者CentOS 6.x的系统上使用Fedora Epel repos一个第三方repo:remi资源库.这些资源包并不是天然地支持CentOS,但是提供了很多流行 ...

  7. 一些User-Agent

    "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0)", "Mozilla/4.0 (compatible; MSIE ...

  8. new Date().getTime()

    new Date().getTime()获取当前时间戳; 不知道是毫秒级还是千分之一毫秒级别

  9. select option 下拉多选单选bootstrap插件使用总结2

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. python 【第三篇】：函数及参数

    函数背景 在学习函数之前,一直遵循:面向过程编程: 根据业务逻辑从上到下实现功能,其往往用一长段代码来实现指定功能,开发过程中最常见的操作就是粘贴复制,也就是将之前实现的代码块复制到现需功能处,如下: ...