`
highfly-s
  • 浏览: 100840 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript 级联下拉选择日期

 
阅读更多

var DM = {
        // 产生从start到end的顺序整数数组
        range: function (start, end) {
            var rge = [];
            if(end > start) {
                for(var i = 0, len = end-start+1; i < len; i++) {
                    rge[i] = start+i;
                }
            } else if(end < start) {
                for(var len = start-end, i = len; i >= 0; i--) {
                    rge[start-end-i] = i+end;
                }
            }
            return rge;
        },
       
        // 判断是否为闰年
        isLeapYear: function(year) {
            year = parseInt(year);
            if(year % 400 == 0) return true;
            else if (year % 4 == 0 && year % 100 != 0) return true;
            else return false;
        },
       
        // 年月日选择器
        getYMDOption: function(start, end, selectedIndex, defaultOption) {
            var ymdList = this.range(start, end),
                ymdOption = '<option>'+(defaultOption ? defaultOption : '请选择')+'</option>';
            ymdList.forEach(function(item, i) {
                if(selectedIndex && selectedIndex-1 == i) ymdOption += '<option selected="selected">'+item+'</option>';
                else ymdOption += '<option>'+item+'</option>';
            });
            return ymdOption;
        },
       
        getDayOption: function(month, year, selectedIndex) {
            switch(month) {
                case '1':
                case '3':
                case '5':
                case '7':
                case '8':
                case '10':
                case '12':
                    return this.getYMDOption(1, 31, selectedIndex, '日');
                break;
               
                case '4':
                case '6':
                case '9':
                case '11':
                    return this.getYMDOption(1, 30, selectedIndex, '日');
                break;
               
                case '2':
                    if(year && this.isLeapYear(year)) return this.getYMDOption(1, 29, selectedIndex, '日');
                    else return this.getYMDOption(1, 28, selectedIndex, '日');
                break;
            }
        },

        resetOption: function(defaultOption) {
            return '<option>' + (defaultOption ? defaultOption : '请选择') + '</option>';
        }
    };

    exports.DM = DM;

    exports.initYMDComponent = function(yearOpt, monthOpt, dayOpt) {
        this.yearOpt = yearOpt || $('birth-year');
        this.monthOpt = monthOpt || $('birth-month');
        this.dayOpt = dayOpt || $('birth-day');

        if(!this.yearOpt) return;

       
        XN.event.enableCustomEvent(this);
        this.init();
    }

    exports.initYMDComponent.prototype = {
        init: function() {
            selectBoxInnerHTML(this.yearOpt, DM.getYMDOption(2013, 1900, '', '年'));
            this.addYearEvent();
            this.addMonthEvent();
            this.bindYearEvent();
            this.bindMonthEvent();
        },

        // 添加年份自定义事件
        addYearEvent: function() {
            var _self = this;
            this.addEvent('yearChange', function(yearOpt) {
                if(yearOpt.selectedIndex == 0) {
                    selectBoxInnerHTML(_self.monthOpt, DM.resetOption());
                    selectBoxInnerHTML(_self.dayOpt, DM.resetOption());
                } else {
                    selectBoxInnerHTML(_self.monthOpt, DM.getYMDOption(1, 12, _self.monthOpt.selectedIndex, '月'));
                    _self.fireEvent('monthChange', _self.monthOpt);
                }
            });
        },

        // 添加月份自定义事件
        addMonthEvent: function() {
            var _self = this;
            this.addEvent('monthChange', function(monthOpt) {
                if(monthOpt.selectedIndex == 0) {
                    selectBoxInnerHTML(_self.dayOpt, DM.resetOption('日'));
                } else {
                    var monthVal = _self.monthOpt.options[_self.monthOpt.selectedIndex].innerHTML,
                        yearVal = _self.yearOpt.options[_self.yearOpt.selectedIndex].innerHTML;
                    selectBoxInnerHTML(_self.dayOpt, DM.getDayOption(monthVal, yearVal, _self.dayOpt.selectedIndex));
                }
            });
        },

        // 添加年份 change 事件
        bindYearEvent: function() {
            var _self = this;
            XN.event.addEvent(this.yearOpt, 'change', function(e) {
                var el = XN.event.element(e);
                _self.fireEvent('yearChange', el);
            });
        },

        // 添加月份 change 事件
        bindMonthEvent: function() {
            var _self = this;
            XN.event.addEvent(this.monthOpt, 'change', function(e) {
                var el = XN.event.element(e);
                _self.fireEvent('monthChange', el);
            });
        }
    }
});

分享到:
评论

相关推荐

    JavaScript级联下拉特效制作

    总的来说,制作JavaScript级联下拉特效是一个很好的实践项目,它涵盖了基本的JavaScript编程、DOM操作以及响应式设计的核心概念。通过这个过程,你可以提升你的JavaScript编程技巧,并为你的网页增添更丰富的交互性...

    javascript级联下拉列表和正则表达式

    javascript 级联下拉列表 正则表达式

    JavaScript动态级联下拉列表框

    JavaScript动态级联下拉列表框是一种常见的前端交互设计,它允许用户在选择一个选项后,根据选择的结果动态更新下一个下拉列表框的内容。这种技术在数据筛选、表单填写等场景中广泛应用,能够提高用户体验,减少不必...

    select级联下拉列表

    在网页设计中,"select级联下拉列表"是一种常见的交互元素,用于创建省市区选择、类别层级展示等场景。这种技术通常结合JavaScript(JS)、HTML5和jQuery库来实现,使得用户能够在多个下拉菜单之间进行联动选择,...

    javascript级联下拉列表实例代码(自写).docx

    ### JavaScript级联下拉列表实例解析 #### 一、引言 级联下拉列表是一种常见的Web表单组件,主要用于需要根据前一个选择的结果来动态更新后续选择项的情况。例如,在用户选择了一个国家之后,相应的省份下拉列表会...

    JQuery写的日期级联下拉菜单

    在Web开发中,日期选择是一个常见的需求,而级联下拉菜单则是实现这一功能的一种优雅方式。这里我们讨论的“JQuery写的日期级联下拉菜单”是一个利用jQuery库实现的交互式用户界面组件,允许用户通过三个连续的下拉...

    javascript四级级联下拉菜单

    JavaScript四级级联下拉菜单是一种常见的网页交互设计,它允许用户在多个下拉菜单中进行选择,逐级筛选出最终的选项。这种设计通常用于表示层次结构的数据,如国家、省份、城市和区域等地理信息,也可以应用于其他...

    级联下拉demo

    级联下拉是一种常见的用户界面元素,特别是在网页和应用程序中,它被广泛用于提供多级选择,例如在国家、省份和城市的选取中。这个“级联下拉demo”显然是一个示例项目,旨在演示如何实现这种功能。让我们深入探讨...

    input 级联下拉列表

    在网页设计和开发中,`input`级联下拉列表是一种常见的交互元素,它允许用户在选择一个选项后,根据该选项的值动态地显示相关的第二个或更多下拉列表。这种设计模式通常用于处理层级关系的数据,如国家/地区、省份/...

    JSP+JavaScript二级级联下拉菜单

    在使用JSP JavaScript过程中有很多的技巧与实现,那么如何构建二级级联下拉菜单呢,本文将会向你做一个源码上的介绍。

    网页表单级联下拉列表自动填写方法

    网页表单级联下拉列表自动填写方法是指在网页表单中,多个下拉列表框之间存在关联关系,选择前一个下拉列表框的选项后,后一个下拉列表框才会出现相关的选项,这样可以实现自动填写省、市、县三级下拉列表框的功能。...

    jquery简单实现级联下拉列表

    本文将详细解析如何使用jQuery来实现级联下拉列表,这是一种常见的Web前端功能,常用于数据关联选择场景,如地区选择(省市区)、分类选择等。 ### 核心概念:级联下拉列表 级联下拉列表是指当用户在一个下拉列表...

    AngularJS实现三级级联下拉选择框

    在本文中,我们将深入探讨如何使用AngularJS实现三级级联下拉选择框。AngularJS,一个由Google维护的JavaScript框架,被广泛用于构建单页应用(SPA),它提供了丰富的功能来处理复杂的前端交互,包括数据绑定、依赖...

    级联下拉菜单

    在级联下拉菜单中,jQuery将帮助我们监听用户在第一个下拉菜单中的选择,并基于此触发Ajax请求获取关联数据。 接着,我们来看看ASP.NET的一般处理程序(.ashx)。这是一种HTTP处理模块,它可以像ASPX页面一样处理...

    Ajax级联下拉列表.rar

    级联下拉列表是一种常见的前端交互设计,用户在一个下拉列表中做出选择后,第二个或更多的下拉列表会根据前一个选择动态地加载相关数据。这通常用于处理有层级关系的数据,如国家-城市-区县的选择,或者类别-子类别-...

    ajax实现级联下拉列表代码

    在网页开发中,级联下拉列表是一种常见的交互设计,它允许用户在选择一个选项后,根据该选项的值动态加载下一个下拉列表的内容。这种功能通常用于展示层级关系的数据,如国家-省份-城市这样的地理信息。在本示例中,...

    级联下拉列表工具类,js实现

    1. **级联下拉列表**: 由多个下拉列表组成,用户在选择第一个下拉列表的选项后,后面的下拉列表会根据前一个选项的选择动态更新显示内容。 2. **JSON数据源**: 级联下拉列表的数据通常存储为JSON格式,每个对象...

    jsp出生日期三级级联下拉列表

    在本文中,我们将深入探讨如何在JSP(JavaServer Pages)中实现一个基于JavaScript的出生日期三级级联下拉列表。这种功能常用于用户注册、个人信息填写等场景,让用户能够方便地选择他们的出生年、月和日。 首先,...

    级联下拉列表

    级联下拉列表是一种常见的前端交互设计,常用于如地区选择、分类筛选等场景,它使得用户能够通过一个下拉菜单的选择触发另一个下拉菜单的内容更新。在这个案例中,我们只用五句代码就能实现这样的功能,这充分体现了...

    javascript实现无限级级联下拉列表

    在JavaScript编程中,实现无限级联下拉列表是一项常见的需求,尤其在构建多级导航菜单、组织结构或者层级关系的数据展示时。无限级联下拉列表允许用户逐级选择,每一级的选择会影响到下一级的显示内容。下面我们将...

Global site tag (gtag.js) - Google Analytics