`

年月日三级联动菜单

    博客分类：
  • Web
 
阅读更多 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>日期下拉菜单示例</title>
    <script type="text/javascript">

        //日期选择器构造函数
        function DateSelector(selYear, selMonth, selDay)
        {
            this.selYear = selYear;
            this.selMonth = selMonth;
            this.selDay = selDay;
            this.selYear.Group = this;
            this.selMonth.Group = this;
            // 给年份、月份下拉菜单添加onchange事件处理函数
            if(window.document.all != null){
                //IE下绑定事件方法
                this.selYear.attachEvent("onchange", DateSelector.Onchange);
                this.selMonth.attachEvent("onchange", DateSelector.Onchange);
            }
            else{
                // Firefox下绑定事件方法
                this.selYear.addEventListener("change", DateSelector.Onchange, false);
                this.selMonth.addEventListener("change", DateSelector.Onchange, false);
            }
            if(arguments.length == 4) {

                // 如果传入参数个数为4，最后一个参数必须为Date对象
                this.InitSelector(arguments[3].getFullYear(), arguments[3].getMonth() + 1, arguments[3].getDate());

            } else if(arguments.length == 6) {

                 // 如果传入参数个数为6，最后三个参数必须为初始的年月日数值
                this.InitSelector(arguments[3], arguments[4], arguments[5]);

            } else {

                // 默认使用当前日期
                var dt = new Date();
                this.InitSelector(dt.getFullYear(), dt.getMonth() + 1, dt.getDate());
            }
        }

 

        // 增加一个最小年份的属性
        DateSelector.prototype.MinYear = (new Date()).getFullYear();
        // 增加一个最大年份的属性
        DateSelector.prototype.MaxYear = 2020;

 

        // 初始化年份
        DateSelector.prototype.InitYearSelect = function() {
            // 循环添加OPION元素到年份select对象中
            for(var i = this.MinYear; i <= this.MaxYear; i++) {
                // 新建一个OPTION对象
                var op = window.document.createElement("OPTION");
                // 设置OPTION对象的值
                op.value = i;
                // 设置OPTION对象的内容
                op.innerHTML = i;
                // 添加到年份select对象
                this.selYear.appendChild(op);
            }
        }

        // 初始化月份
        DateSelector.prototype.InitMonthSelect = function() {
            // 循环添加OPION元素到月份select对象中
            for(var i = 1; i < 13; i++)
            {
                // 新建一个OPTION对象
                var op = window.document.createElement("OPTION");
                // 设置OPTION对象的值
                op.value = i;
                // 设置OPTION对象的内容
                op.innerHTML = i;
                // 添加到月份select对象
                this.selMonth.appendChild(op);
            }
        }

        // 根据年份与月份获取当月的天数
        DateSelector.DaysInMonth = function(year, month) {
            var date = new Date(year, month, 0);
            return date.getDate();
        }

        // 初始化天数
        DateSelector.prototype.InitDaySelect = function() {
            // 使用parseInt函数获取当前的年份和月份
            var year = parseInt(this.selYear.value);
            var month = parseInt(this.selMonth.value);
            
            // 获取当月的天数
            var daysInMonth = DateSelector.DaysInMonth(year, month);
            
            // 清空原有的选项
            this.selDay.options.length = 0;
            // 循环添加OPION元素到天数select对象中
            for(var i = 1; i <= daysInMonth ; i++) {
                // 新建一个OPTION对象
                var op = window.document.createElement("OPTION");
                // 设置OPTION对象的值
                op.value = i;
                // 设置OPTION对象的内容
                op.innerHTML = i;
                // 添加到天数select对象
                this.selDay.appendChild(op);
            }
        }

        // 处理年份和月份onchange事件的方法，它获取事件来源对象       

        // 并调用它的Group对象提供的InitDaySelect方法重新初始化天数
        // 参数e为event对象
        DateSelector.Onchange = function(e) {
            var selector = window.document.all != null ? e.srcElement : e.target;
            selector.Group.InitDaySelect();
        }

        // 根据参数初始化下拉菜单选项
        DateSelector.prototype.InitSelector = function(year, month, day) {
            // 由于外部可以调用这个方法，因此在这里也要将selYear和selMonth的选项清空
            // 另外因为InitDaySelect方法已经有清空天数下拉菜单，因此这里就不用重复工作了
            this.selYear.options.length = 0;
            this.selMonth.options.length = 0;
            
            // 初始化年、月
            this.InitYearSelect();
            this.InitMonthSelect();
            
            // 设置年、月初始值
            this.selYear.selectedIndex = this.MinYear - year;
            this.selMonth.selectedIndex = month - 1;
            
            // 初始化天数
            this.InitDaySelect();
            
            // 设置天数初始值
            this.selDay.selectedIndex = day - 1;
        }
    </script>
</head>
<body>
    <form id="form1" action="">
        <select id="selYear"></select>年

        <select id="selMonth"></select>月

        <select id="selDay"></select>日
    </form>
</body>
</html>
<script type="text/javascript">
    var selYear = window.document.getElementById("selYear");
    var selMonth = window.document.getElementById("selMonth");
    var selDay = window.document.getElementById("selDay");
    var now = new Date();
    //以下三个效果等同，都是默认为当前日期
    new DateSelector(selYear,selMonth,selDay);
    //new DateSelector(selYear, selMonth ,selDay, now);
    //new DateSelector(selYear, selMonth ,selDay, now.getFullYear(), now.getMonth()+1, now.getDate());
</script>
 
分享到：
| javascript中创建对象的几种方式
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JQuery 年月日三级下拉框联动

    一个直制的JQuery 年月日三级下拉框联动 使用方法非常简单 &lt;title&gt;JQuery 年月日三下拉框联动 &lt;script src="jquery-1.4.2.min.js" type="text/javascript"&gt;&lt;/script&gt; ...

    JS年月日三级联动下拉框

    很好很强大的 js年月日三级联动。可以判断平闰年月

    年月日三级联动（带平年闰年计算）

    该代码是用javascript实现年月日的联动 不用数据库 自动识别平年闰年 方便实用

    年、月、日三级联动下拉菜单

    JS实现年、月、日三级联动下拉菜单，无刷新效果

    限定起止日期的jQeruy年月日选择三级联动

    限定起止日期的jQeruy年月日选择三级联动,需求其实很简单,就是让用户填写出生日期的时候选择年月日. 当然可以用bootstrap-datepicker,感觉有点杀鸡用牛刀似的,而且手机选择的时候反而不便捷. 本来就是3个选择菜单...

    严格的三级联动日期下拉菜单

    严格的三级联动日期下拉菜单，自动判断闰年，通过年月自动显示合法的 日期

    javascript实现日期三级联动下拉框选择菜单

    主要介绍了javascript实现日期三级联动下拉框选择菜单，实现JS年月日三级联动下拉框选择功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

    下拉菜单年月日插件

    下拉菜单年月日插件，1900年到现在的时间 三级联动

    日期下拉菜单select

    年月日三级联动下拉菜单 可设置默认值

    jsp编程技巧集锦

    三级下拉列表框联动菜单? 24. 在JSP中如何调用浏览器中的"另存为"功能? 25. 网页全屏显示 26. 求两个日期相隔了多少天:输入时间格式为(yyyy-mm-dd) 27. 上传文件对话框 28. 分页测试 29. 下载...

    asp.net知识库

    深入剖析ASP.NET组件设计]一书第三章关于ASP.NET运行原理讲述的补白 asp.net 运行机制初探(httpModule加载) 利用反射来查看对象中的私有变量 关于反射中创建类型实例的两种方法 ASP.Net应用程序的多进程模型 NET委托...

Magicbox
Global site tag (gtag.js) - Google Analytics