javascript date linkage selector [Some of the codes are worth learning]

javascript date linkage selector [Some of the codes are worth learning]_Time and date

WBOY

Release： 2016-05-16 18:39:09

Original

935 people have browsed it

[Ctrl A Select all Note:

If you need to introduce external Js, you need to refresh to execute
]

[Parameter description] Copy code

 The code is as follows:

 
var dateSelector = new DateSelector(year drop-down ID, month drop-down ID, Day drop-down ID, {floorYear: forward years, ceilYear: backward years}); 
dateSelector.onStart = dateSelector.onEnd = function(){ // Customize start and end events
$('info ').innerHTML = this.getSelText(this.year) 'Year' 
('0' this.getSelText(this.month)).slice(-2) 'Month' 
('0' this. getSelText(this.date)).slice(-2) 'Day'; 
} 

dateSelector.init(); // Initialization begins

[description text]

The method to generate options here is the quite satisfactory options[i].text = options[i].value = i;

I used this method during the period:

container.options [container.options.length] = new Option(i, i, false, (i == sign ? true : false))
This new Option has 4 parameters available (text, value, defaultSelected, selected); Finally A parameter can be set and selected.

But no official information has been found. I also encountered a BUG in IE6. If you have used it, please correct me.

BUG Demonstration

This There is no problem in IE7, IE8, FF3, etc. But in IE6, the previous one will be selected. The reason is still unknown. (After confirmation, it seems to be a problem with IE Tester. Then the following solution is also a simple option generation solution)

Test code: Copy code

 The code is as follows:

 
< ;select id="year"> 
 <script> 
    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; 
    } 
    /*! 
     *    DateSelector 
     * 
     * Copyright (c) 2009 GoodNess2010 
     * Date: 2009-12-15 (星期二) 
     */ 
    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 || {}); 
        }, 
        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(); 
        }, 
        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(); 
        } 
    }; 
</script><script> 
        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(); 
    </script>                