软件开发培训班 >> 编程开发 >> JavaScript

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

　　本文标签：日期,选择器

<!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>

技术文章快速查找

JavaScript对象学习经验整理

两个table之间相互移动数据

28个JS验证函数收集

jQuery 1.4发布代码库内部重写组织

JQuery给元素绑定click事件多次执行的解决方法

分享XmlHttpRequest调用Webservice的一点心得

浅析Javascript使用include/require

DIV+CSS设计的动感横向导航

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建