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);
            });
        }
    }
});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值