`
mutongwu
  • 浏览: 448685 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

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

阅读更多
<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 class="disabled_td">'
                    +(preMaxDay-startDay+j+1) + '</td>';
            }
            
        }else{
            for(var j=0;j<startDay;j++){
                tds += '<td class="disabled_td">&nbsp;</td>';
            }
        }
        var j=1;
        for(var i=1 ;(i + startDay)<= 42; i++){
            if((i+startDay-1)%7 == 0){
                trs = trs + '<tr>' + tds + '</tr>';
                tds = "";
            }
            if(i == this.date){
                tmp = new Date(this.dt.getFullYear(),this.dt.getMonth(),i);
                if(tmp < min || tmp > max){
                    tds = tds + '<td class="today invalid_td">'+ i + '</td>';
                }else{
                    tds = tds + '<td class="today">'+ i + '</td>';
                }
            }else if(i<=maxDay){
                tmp = new Date(this.dt.getFullYear(),this.dt.getMonth(),i);
                if(tmp < min || tmp > max){
                    tds = tds + '<td class="invalid_td">'+ i + '</td>';
                }else{
                    tds = tds + '<td>'+ i + '</td>';
                }
            }else{
                if(this.multi){
                    tds = tds + '<td class="disabled_td">' +(j++) +'</td>';
                }else{
                    tds = tds + '<td class="disabled_td">&nbsp;</td>';
                }
            }
            
        }
        trs = trs + "<tr>" + 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 class="calender_nav">'
               + '<td>&lt;&lt;</td>' 
               + '<td>&lt;</td>'
               + '<td colspan="3">'+this.language[this.lang].now+'</td>'
               + '<td>&gt;</td>' 
               + '<td>&gt;&gt;</td></tr>' 
    },
    createTable:function(){
        this.day = this.dt.getDay();
        this.fullYear = this.dt.getFullYear();
        this.month = this.dt.getMonth() + 1;
        this.date = this.dt.getDate();
        
        var table = ['<table id="table_'+ this.genId + '" class="calender_tb">',"</table>"];
        var thead = ["<thead>","</thead>"];
        var tbody = ['<tbody>',"</tbody>"];
        
        this.output =  table[0] 
                + this.createCaption()
                + thead[0]
                + this.createThs()
                + tbody[0]
                + this.createTbody() 
                + this.createNav() 
                + tbody[1] + table[1];    
    },
    show: function(){
        if(this.renderTo == null){
            this.renderTo = document.createElement("DIV");
            this.renderTo.id = "calendar" + 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();
}



  • 大小: 3.1 KB
分享到:
评论

相关推荐

    git日历开源组件android-times-square-master

    3. 时间范围限制:允许设定日期选择的最小值和最大值,防止用户选择超出范围的日期。 4. 时间选择事件监听:提供了详细的日期选择事件回调,方便开发者处理用户的选择操作。 5. 支持多语言:内置多国语言支持,适应...

    带有时间选择的日历控件

    9. **测试和调试**:开发过程中,对控件进行充分的测试至关重要,包括功能测试(确保所有时间选择都有效)、边界条件测试(如最小值、最大值等)以及兼容性测试(在不同的浏览器和操作系统上运行)。 10. **性能...

    My97DatePicker JS日历控件

    2. **日期范围限制**:可以设置日期选择的最小值和最大值,防止用户选择超出设定范围的日期。 3. **多语言支持**:支持多种语言切换,满足全球化网站的需求。 4. **自定义样式**:提供丰富的CSS样式定制选项,可以...

    laydate日历插件

    2. 日期范围限制:可以设置最大值和最小值,限制用户选择的日期范围。 3. 自定义样式:layDate允许开发者自定义日历的展示样式,通过CSS样式覆盖默认样式。 4. 事件监听:提供onchange、clear、done等事件回调,方便...

    web开发非常经典的日历控件

    4. **日期范围限制**:开发者可以设置日期选择的最小值和最大值,防止用户选择超出范围的日期。 5. **日期计算与比较**:内置了日期计算功能,可以方便地进行日期之间的加减操作,同时支持日期的比较,便于在应用中...

    日历控件jquery

    - **日期范围限制**:设置可选择日期的最小值和最大值。 - **事件绑定**:在特定日期上绑定自定义事件,如会议或提醒。 - **日期输入验证**:当用户手动输入日期时,进行格式检查和有效性验证。 - **无障碍性**:...

    JS日历控件

    - **日期范围限制**:设置可选日期的最小值和最大值。 - **移动设备适配**:优化触摸事件处理,确保在手机和平板上的可用性。 - **主题和定制**:提供预设主题或允许用户自定义颜色方案。 6. **库和框架集成**:...

    ios 日历插件

    2. 配置datePicker的属性,如样式、最小值、最大值等。 3. 设置`UIDatePicker`的代理(遵循`UIPickerViewDelegate`和`UIPickerViewDataSource`协议)以便处理用户交互。 4. 实现代理方法,如`datePicker(_:...

    layui-laydate时间日历控件使用方法详解

    6. min/min: 设置日期选择的最小值和最大值。 7. trigger: 设置触发日期选择器的事件,默认为'focus',对于非输入框,默认事件为'click'。 8. show: 控制是否在初始化时立即显示,默认值为false。 9. position: 设置...

    WdatePicker_JS日历控件

    4. `minDate`和`maxDate`:设置可选日期的最小值和最大值。 5. `onpicking`:选择日期后的回调函数,可以在此处理选中的日期。 6. `skin`:更改皮肤样式,如`'wdate'`是默认样式,也可以自定义CSS类名。 ### 四、...

    My97DatePicker(几种日历控件/js/实例演示)

    4. **日期范围限制**:开发者可以设定日期选择的最小值和最大值,防止用户选择超出范围的日期。 5. **日期计算功能**:提供增加、减少日期的功能,用户可以直接通过控件增加或减少天数、月数、年数。 6. **事件...

    My97DatePicker日历控间

    4. **日期范围限制**:可以设定日期选择的最小值和最大值,防止用户选择超出范围的日期。 5. **日期计算**:提供了加减日期的功能,用户可以直接在日历上进行日期的增加或减少操作。 6. **事件处理**:提供了丰富...

    WdatePicker日历控件

    例如,你可以设定日期的最小值和最大值,限制用户可选的日期范围;设置日期格式,如"yyyy-MM-dd"或"yyyy/MM/dd"等;还可以开启或关闭时间选择功能,满足不同的时间精度需求。此外,该控件还支持多语言,可以方便地...

    jQuery EasyUI 1.2.4 API 中文文档(完整)

    - 支持设置最小值、最大值。 - **事件** - `onSpin`: 数值变化时触发。 - **方法** - `$.fn.numberspinner('getValue')`: 获取当前值。 **4.12 TimeSpinner时间微调器** - **依赖** - 无。 - **用法** - 创建...

    嵌入式系统 实验 代码

    - 实现一个简单的计算器,支持加、减、乘、除、开方和幂运算。 #### 实现步骤 1. **界面初始化**:初始化LCD显示屏,清屏并点亮屏幕。 2. **数据输入**:提示用户输入两个数值。 3. **执行加法运算**:编写函数`add...

    一个好用的日期控件My97DatePicker

    3. **日期范围限制**:开发者可以通过配置,设定日期选择的最小值和最大值,防止用户选择超出范围的日期,确保数据的有效性。 4. **自定义样式**:My97DatePicker允许用户通过CSS自定义日历的外观,包括颜色、字体...

    javascript日期控件

    - **选择范围限制**:允许设定可选日期的最小值和最大值,防止用户选择超出范围的日期。 - **格式化日期**:控件通常提供日期的多种展示格式,如“年-月-日”、“月/日/年”等,可以根据需求进行调整。 - **多...

    MyOffice简单案例

    比如,求和、平均值、最大值和最小值等统计运算。还可以使用图表功能将数据可视化,帮助理解复杂的数据关系。 至于演示文稿制作,MyOffice可能包含一个类似于PowerPoint的应用,让用户能够创建吸引人的幻灯片。用户...

    VC++控件演示集合

    开发者可以调整进度条的最小值、最大值和当前值,以反映实际的进度。在应用程序中,进度条可以提升用户体验,因为它为用户提供了操作反馈。 4. **日历控件(MonthCalendar Control)**:允许用户选择日期,通常用于...

Global site tag (gtag.js) - Google Analytics