日期联动选择器

代码演示

 

 

程序源码 

    var $ = function(id) { return 'string' == typeof id ? document.getElementById(id) : id; };

    var Extend = function(destination, source) {
        for(var pro in source) {
            destination[pro] = source[pro];
        }
        return destination;
    }

    var addEvent = function(obj, type, fn) {
        if(obj.addEventListener) {
            obj.addEventListener(type, fn, false);
            return true;
        }else if(obj.attachEvent) {
            obj['e'+type+fn] = fn;
            obj[type+fn] = function(){
                obj['e'+type+fn](window.event);
            }
            obj.attachEvent('on'+type, obj[type+fn]);
            return true;
        }
        return false;
    }

    function DateSelector(idYear, idMonth, idDate, options) {
        var D = new Date();
        this.year = $(idYear);
        this.month = $(idMonth);
        this.date = $(idDate);
        this.nowYear = D.getFullYear();
        this.nowMonth = D.getMonth() + 1;
        this.nowDate = D.getDate();
        Extend(this, this.setOptions(options));
    };
    DateSelector.prototype = {
        setOptions: function(options){
            // 默认项
            this.options = {
                floorYear: 5,            // 距当前年份前5年
                ceilYear: 7,            // 距当前年份后7年
                onStart: function(){},  // 前置事件
                onEnd: function(){}        // 结束事件
            };
            return Extend(this.options, options || {});
        },
        // 创建option
        createOption: function(container, start, end, sign){
            sign = sign || start;
            var _num = parseInt(end-start+1, 10); container.options.length = _num; 
            for(var i = 0; i < _num; i++) {
                container.options[i].text = container.options[i].value = start + i;
            }
            container.selectedIndex = (sign-start >= _num ? _num-1 : sign-start);
        },
        // 获取年月对应的日期数
        getDate: function(y, m){
            return new Date(y, m, 0).getDate();
        },
        // 获取option-text
        getSelText: function(sel) {
            return sel.options[sel.selectedIndex].text;
        },
        // 年月日切换
        changeDate: function(bindO){
            var _this = this;
            addEvent(bindO, 'change', function(){
                var y = _this.getSelText(_this.year), m = _this.getSelText(_this.month), d = _this.getSelText(_this.date);
                _this.createOption(_this.date, 1, _this.getDate(y, m), d);
                _this.onEnd();
            });

        },
        // 绑定相应事件
        bindEvents: function(){
            var _this = this;
            this.changeDate(this.year); this.changeDate(this.month);
            addEvent(this.date, 'change', function(){ _this.onEnd(); });
        },
        // 代码初始化
        init: function(){
            var _startYear = parseInt(this.nowYear - this.floorYear, 10);
            var _endYear = parseInt(this.nowYear + this.ceilYear, 10);
            var _endDate = this.getDate(this.nowYear, this.nowMonth, 0);
            this.createOption(this.year, _startYear, _endYear, this.nowYear);
            this.createOption(this.month, 1, 12, this.nowMonth);
            this.createOption(this.date, 1, _endDate, this.nowDate);
            this.bindEvents();
            this.onStart();
        }
    };

 

使用说明

实例化对象.并传递年月日下拉框ID.并设置默认属性.
默认属性有:

floorYear距当前年的前几年.

ceilYear距当前年的后几年.

onStart切换前事件.

onEnd切换后事件
最后对象初始化调用即可 

var dateSelector = new DateSelector('year', 'month', 'date', {floorYear: 1});        
dateSelector.onStart = dateSelector.onEnd = function(){
    $('info').innerHTML = this.getSelText(this.year) + '年' + 
                          ('0' + this.getSelText(this.month)).slice(-2) + '月' + 
                          ('0' + this.getSelText(this.date)).slice(-2) + '日';
}
dateSelector.init();

 

代码示例下载