首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

简略日历,支持最大、最小值

2012-11-25 
简单日历,支持最大、最小值。style typetext/css.calender_tb{border-collapse:collapsebackground-co

简单日历,支持最大、最小值。

<style type="text/css">.calender_tb{border-collapse:collapse;background-color:lightblue;font-family:'宋体';font-size:90%;width:160px;height:160px;}.calender_tb tr td{padding:2px;cursor:pointer;border:1px solid black;text-align:center;white-space: nowrap;}.calender_tb caption{background-color:#CCCC99;border-top:1px solid black; border-left:1px solid black; border-right:1px solid black; font-size:120%;}.calender_tb tr.calender_nav{border:1px solid black; white-space: nowrap;}.calender_tb tr.calender_nav td{border:none;}.calender_tb th{background-color:lightgreen;border-top:1px solid black; border-left:1px solid black; border-right:1px solid black; }.calender_tb .disabled_td{background-color:#999;}.calender_tb .invalid_td{background-color:#666;}.today{background-color:blue;color:#fff;}.calender_tb tbody tr td.td_mouse_over{color:blue;background-color:yellow;}</style>

var shawn = {};/** * @param cfg 配置项 * @author shawn * @version 1.0 * */shawn.Calendar = function(cfg){    this.renderTo = null;    this.now  = new Date();    this.id = this.genId++;    this.multi = false;    this.lang = 'zh';        if(Object.prototype.toString.call(cfg) == '[object Date]'){        this.dt = cfg;    }else if(Object.prototype.toString.call(cfg) == '[object Object]'){        this.dt = cfg.dt || new Date();        this.multi = cfg.multi || false;        this.lang = cfg.lang || 'zh';        this.minValue = cfg.minValue || null;        this.maxValue = cfg.maxValue || null;        this.id = cfg.id || this.id;        this.renderTo = typeof cfg.renderTo == 'string' ?document.getElementById(cfg.renderTo):cfg.renderTo ;        this.callbackFn = cfg.callbackFn;    }    this.init();    }shawn.Calendar.prototype = {    genId: 0,     defaultCss:'',    language:{        zh:{            ths:['日','一','二','三','四','五','六'],            year:'年',            month:'月',            now:'今天'},        en:{                        ths:['Sun','Mon','Tue','Wen','Ths','Fri','Sat'],            year:'/',            month:'/',            now:'Today'}    },    baseJudge:function(){         if(navigator.appName.indexOf('Microsoft')>-1){            this.isIE = true;       }else{            this.isIE = false;       }           },    init: function(){        this.baseJudge();                this.createTable();    },    createCaption:function(){        var str = '<caption>'                 + this.fullYear + this.language[this.lang].year                 + this.month + this.language[this.lang].month                 + '</caption>'                        return str;    },    createThs:function(){        var ths = "<tr>";        var ths_zh = this.language[this.lang].ths;        for(var i=0;i<7;i++){            ths+="<th>" + ths_zh[i] + "</th>";        }        ths += "</tr>";        return ths;    },    createTbody:function(){        var maxDay = this.getMaxDay(this.fullYear,this.month);        var startDay = new Date(this.fullYear,this.month-1,1).getDay();        var min = new Date(1970,0,1);        var max = new Date(2999,11,31);        var tmp = null;        if(this.minValue){            tmp = this.minValue.split('-');            min = new Date(tmp[0],tmp[1]-1,tmp[2]);            if(Object.prototype.valueOf.call(min) == 'Invalid Date'                 || Object.prototype.valueOf.call(min) == 'NaN' ){                min = new Date(1970,0,1);                }        }        if(this.maxValue){            tmp = this.maxValue.split('-');            max = new Date(tmp[0],tmp[1]-1,tmp[2]);            if(Object.prototype.valueOf.call(max) == 'Invalid Date'                 || Object.prototype.valueOf.call(max) == 'NaN' ){                max = new Date(2999,11,31);            }        }        var tds = "",trs="";        if(this.multi){            var preMaxDay = this.getMaxDay(this.fullYear,this.month-1);            for(var j=0;j<startDay;j++){                tds = tds + '<td + tds + "</tr>";           return trs;    },    getMaxDay:function(year,month){        var maxDay = 0;        var leap = (year%400 == 0 || (year%4 == 0 && year%100 !=0));        if(leap && month == 2){            maxDay = 29;        }else if(month == 2){            maxDay = 28;        }else if("1,3,5,7,8,10,12,".indexOf(month + ",") == -1){            maxDay = 30;        }else{            maxDay = 31;        }        return maxDay;    },    createNav:function(){        return '<tr + this.id;            document.body.appendChild(this.renderTo);            document.getElementById(this.renderTo.id).innerHTML = this.output;        }        else{            document.getElementById(this.renderTo.id).innerHTML = this.output;        }        this.output = ''        this.addListeners();    },    render: function(target){                this.renderTo = target;      },    nextMonth: function(){        this.dt = new Date(this.fullYear,this.month,this.date);        this._update();    },    previousMonth: function(){        this.dt = new Date(this.fullYear,this.month-2,this.date);        this._update();    },    _update:function(){        this.removeListeners();        document.getElementById(this.renderTo.id).innerHTML = '';        this.createTable();        this.show();    },    nextYear: function(){        this.dt = new Date(this.fullYear+1,this.month-1,this.date);        this._update();    },    previousYear: function(){        this.dt = new Date(this.fullYear-1,this.month-1,this.date);        this._update();    },    restore:function(){        this.dt = new Date();        this._update();    },    loadCss:function(css){        if(css){        }else{                    }            },    addListeners:function(){        var that = this;        if(!this.eventObj){            this.eventObj = {};        }        function clickFn(e){            e = e || window.event;            var target = e.srcElement || e.target;            if(target.tagName && target.tagName.toLowerCase() == 'td'){               if(target.className.indexOf("disabled_td") == -1                     && target.className.indexOf("invalid_td") == -1 ){                    switch(target.innerHTML){                        case "&lt;":that.previousMonth();break;                        case "&lt;&lt;" :that.previousYear();break;                        case "&gt;":that.nextMonth();break;                        case "&gt;&gt;":that.nextYear();break;                        case that.language[that.lang].now:that.restore();break;                        default:{                            that.selectedDay = parseInt(target.innerHTML);                    if(!isNaN(that.selectedDay)){                                var rs = new Date();                            rs.setFullYear(that.fullYear);                            rs.setMonth(that.month-1);                            rs.setDate(that.selectedDay);                                that.callbackFn.call(window,rs)                            }                        }                    }               }            }        }        function mouseoverFn(e){            e = e || window.event;            var target = e.srcElement || e.target;            if(target.tagName.toLowerCase() == 'td'){                 if(target.className.indexOf("disabled_td") == -1                     && target.className.indexOf("invalid_td") == -1 ){                    target.className = target.className + ' td_mouse_over ';                 }            }           }        function mouseoutFn(e){            e = e || window.event;            var target = e.srcElement || e.target;            if(target.tagName.toLowerCase() == 'td'){                 if(target.className.indexOf("disabled_td") == -1                     && target.className.indexOf("invalid_td") == -1 ){                    target.className = target.className.replace(/\s*td_mouse_over\s*/,'');                 }            }         }        this.eventObj.click = clickFn;           this.eventObj.mouseover = mouseoverFn;        this.eventObj.mouseout = mouseoutFn;                if(this.isIE){             this.renderTo.attachEvent('onclick',clickFn);             this.renderTo.attachEvent('onmouseover',mouseoverFn);             this.renderTo.attachEvent('onmouseout',mouseoutFn);        }else{            this.renderTo.addEventListener('click',clickFn,false);            this.renderTo.addEventListener('mouseover',mouseoverFn,false);            this.renderTo.addEventListener('mouseout',mouseoutFn,false);        }    },    removeListeners:function(){        if(this.eventObj){            for(name in this.eventObj){                if(this.isIE){                    this.renderTo.detachEvent('on' + name,this.eventObj[name]);                }else {                    this.renderTo.removeEventListener(name,this.eventObj[name],false);                }            }        }    }}

//例子function  go(){      var   cal = new shawn.Calendar({            renderTo:'str2',            dt:new Date(),            minValue:'2010-12-15',            maxValue: '2011-2-1',            multi:true,            callbackFn:function(val){                alert('Value is ' + val.toLocaleString());            }         }).show();}



热点排行