`
highfly-s
  • 浏览: 96755 次
  • 性别: 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);
            });
        }
    }
});

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics