javascript 日期联动选择器 [其中的一些代码值得学习]

时间:2020-05-12 人气:0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title> DateSelector </title> 
<style> 
    body { 
        margin: 0px; 
        padding: 0px; 
        font-size: 12px; 
    } 
    #year, #month, #date{ 
        width: 60px; 
        margin-right: 3px; 
    } 
</style> 
<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> 
</head> 
<body> 
    <select id="year"></select><select id="month"></select><select id="date"></select> 
    <span id="info"></span> 
    <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> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

[参数说明]

复制代码代码如下:

var dateSelector = new DateSelector(年下拉ID, 月下拉ID, 日下拉ID, {floorYear: 向前几年, ceilYear: 向后几年});
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(); // 初始化开始

[说明文字]

这里生成option的方法选择了中规中矩的options[i].text = options[i].value = i;

期间用过一个这个方法:

container.options[container.options.length] = new Option(i, i, false, (i == sign ? true : false))
这个new Option有4个参数可用(text, value, defaultSelected, selected); 最后一个参数可以设置选中.

但一直没有查到官方资料. 在IE6中也遇到了BUG.大家有用过的请指正.

BUG演示

这个在IE7,IE8,FF3等都没问题.但在IE6就会选中的是前一个.现在还未知原因. (经过确认好像是IE Tester的问题.那么下面这个方案也是个简洁的生成option方案)

测试代码:

复制代码代码如下:

加载全部内容