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

简单日历-带时间显示

prototypeJ#MicrosoftGoSUN 
阅读更多 
<style type="text/css">

.calender_tb{
	border:1px solid black;
	border-collapse:collapse;
	background-color:lightblue;
	font-family:'宋体';
	font-size:90%;
	width:180px;
	height:180px;
}
.calender_tb tr td{
	margin:0px;
	padding:1px;
	cursor:pointer;
	border:none;
	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{
	height:25px;
	border:1px solid black; 
	white-space: nowrap;
	background-color:#ccc;	
}
.calender_tb tr.calender_nav td{
	border:none;
}
.calender_tb th{
	border-top:1px solid black; 
	border-left:1px solid black; 
	border-right:1px solid black; 
	border:none;
}
.calender_tb tr.calendar_time td.disabled_td {
	overflow:hidden;
	color:#666;
}
.calender_tb .disabled_td{
	color:#666;
}
.calender_tb .invalid_td{
	color:#666;
}
.today{
	background-color:blue;
	color:#fff;
}
.calender_tb tbody tr td.td_mouse_over{
	color:blue;
	background-color:yellow;
}
.calendar_time{
	border-top:1px solid black;
}
</style>


var shawn = {};
/**
 * @param cfg 配置项
 * @author shawn
 * @version 1.0
 * */
shawn.Calendar = function(cfg){
    this.renderTo = null;
    this.now  = new Date();
    this.id = "shawn_table_" + this.genId++;
    this.multi = false;
    this.lang = 'zh';
    this.autoFix = true;
    this.dateOnly = true;
    
    if(Object.prototype.toString.call(cfg) == '[object Date]'){
        this.value = cfg;
    }else if(Object.prototype.toString.call(cfg) == '[object Object]'){
        this.value = cfg.value || 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.autoFix = cfg.autoFix === false ?  false : true;
        this.dateOnly = cfg.dateOnly === false ?  false : true;
        this.callbackFn = cfg.callbackFn;
    }
    this.init();    
}
shawn.Calendar.prototype = {
    genId: 0, 
    format:'YYYY-MM-DD hh:mm:ss',
    dateTimeReg: /^([12]\d{3})-(0[1-9]|1[0-2])-([0-2]\d|3[0-1])\s([01]\d|2[0-3]):([0-5]\d):([0-5]\d)$/,
    dateReg: /^([12]\d{3})-(0[1-9]|1[0-2])-([0-2]\d|3[0-1])$/,
    timeReg:/^([01]\d|2[0-3]):([0-5]\d):([0-5]\d)$/,
    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;
       }
       
    },
    initValue:function(){
        if(typeof this.value == 'string'){
            var result = this.value.match(this.dateTimeReg);
            if(result != null){
                this.value = new Date(result[1],result[2]-1,result[3],result[4],result[5],result[6]);
            }else{
                result = this.value.match(this.dateReg);
                if(result != null){
                    this.value = new Date();
                    this.value.setFullYear(result[1]);
                    this.value.setMonth(result[2]-1);
                    this.value.setDate(result[3]);
                }else{
                    this.value = new Date();
                }
            }
        }else if(Object.prototype.toString.call(this.value) == '[object Date]'){
            
        }else{
            this.value = new Date();
        }
        this.day = this.value.getDay();
        this.fullYear = this.value.getFullYear();
        this.month = this.value.getMonth() + 1;
        this.date = this.value.getDate();    
        this.hour = this.value.getHours();
        this.min = this.value.getMinutes();
        this.sec = this.value.getSeconds();
    },
    init: function(){
        this.baseJudge();
        this.initValue();
        this.createTable();
    },
 
    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.value.getFullYear(),this.value.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.value.getFullYear(),this.value.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" class="disabled_td_">'
               //+this.language[this.lang].now
               + this.fullYear + this.language[this.lang].year
               + this.month + this.language[this.lang].month
               +'</td>'
               + '<td>&gt;</td>' 
               + '<td>&gt;&gt;</td></tr>' 
    },
    createHours:function(){
        var str = '';
        for(var i=0;i<=23;i++){
            if(i == this.hour){
                str +='<option value="'+ i +'" selected="selected">' + i + '</option>';
            }else{
                str +='<option value="'+ i +'">' + i + '</option>';
            }
        }
        return '<select name="hour">' + str + '</select>';
    },
    createMinutes:function(){
        var str = '';
        for(var i=0;i<=59;i++){
            if(i == this.min){
                str +='<option value="'+ i +'" selected="selected">' + i + '</option>';
            }else{
                str +='<option value="'+ i +'">' + i + '</option>';
            }
        }
        return '<select name="min">' + str + '</select>';
    },
    createSeconds:function(){
        var str = '';
        for(var i=0;i<=59;i++){
            if(i == this.sec){
                str +='<option value="'+ i +'" selected="selected">' + i + '</option>';
            }else{
                str +='<option value="'+ i +'">' + i + '</option>';
            }
        }
        return '<select name="sec">' + str + '</select>';
    },
    fixSelect:function(){
        var tb = document.getElementById(this.id);
        var inputs = tb.getElementsByTagName('select');        
        if(this.isIE){
            var computedStyle = tb.currentStyle; 
        }else{
            var computedStyle = document.defaultView.getComputedStyle(tb, null);  
        }
        var i = 0;
        var width = parseInt(computedStyle.width);
//        var height = parseInt(computedStyle.height);
        while(inputs[i]){
            inputs[i].style.width = Math.floor(2*width/9) + 'px';
//            inputs[i].style.height = Math.floor(height/7) + 'px';
            i++;
        }
    },    
    createTime:function(){
        return '<tr class="calendar_time">'
               + '<td class="disabled_td" colspan="7"> '
               + this.createHours() + ":"
               + this.createMinutes() + ":"
               + this.createSeconds()
               + '</td></tr>'
    },
    createTable:function(){
        
        var table = ['<table id="'+ this.id + '" class="calender_tb">',"</table>"];
        var thead = ["<thead>","</thead>"];
        var tbody = ['<tbody>',"</tbody>"];
        var timeField =  this.dateOnly == true?'':this.createTime();
        this.output =  table[0] 
                + thead[0]
                + this.createNav() 
                + this.createThs()
                + thead[1]
                + tbody[0]
                + this.createTbody() 
                + timeField
                + 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();
        if(this.autoFix && this.dateOnly ==false){
            this.fixSelect();
        }
    },
    render: function(target){
        this.renderTo = target;  
    },
    getValue:function(){
        var tb = document.getElementById(this.id);
        var selects = tb.getElementsByTagName('select');
        var i = 0,hour=0,min=0,sec=0;
        while(selects[i]){
            if(selects[i].name == 'hour'){
                hour = selects[i].value;
            }else if(selects[i].name == 'min'){
                min = selects[i].value;
            }else if(selects[i].name == 'sec'){
                sec = selects[i].value;
            }
            i++;
        }
        return new Date(this.fullYear,this.month,this.date,hour,min,sec);
    },
    nextMonth: function(){
        this.value = new Date(this.fullYear,this.month,this.date);
        this._update();
    },
    previousMonth: function(){
        this.value = new Date(this.fullYear,this.month-2,this.date);
        this._update();
    },
    _update:function(){
        this.removeListeners();
        document.getElementById(this.renderTo.id).innerHTML = '';
        this.initValue();
        this.createTable();
        this.show();
    },
    nextYear: function(){
        this.value = new Date(this.fullYear+1,this.month-1,this.date);
        this._update();
    },
    previousYear: function(){
        this.value = new Date(this.fullYear-1,this.month-1,this.date);
        this._update();
    },
    restore:function(){
        this.value = new Date();
        this._update();
    },

    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)){
                                that.callbackFn.call(window,that.getValue())
                            }
                        }
                    }
               }
            }
        }
        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',
            dateOnly:false,
            value: '2010-09-09 12:12:12',
//            minValue:'2010-12-15',
//            maxValue: '2011-2-1',
            multi:true,
            //lang:'en',
            callbackFn:function(val){
                alert('Value is ' + val.toLocaleString());
            }
         }).show();
}



  • 大小: 2.9 KB
分享到：
| 定时器timer的进一步引用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    flex带时分秒日历---完善版

    本项目“flex带时分秒日历---完善版”显然是一个基于Flex技术的日历组件，它不仅显示日期，还支持选择时间，包括小时、分钟和秒钟，这对于需要进行时间选择的Web应用非常实用。 Flex日历组件的设计和实现涉及多个...

    一个不错的日历-桌面显示

    在这个信息化飞速发展的时代，日常时间管理变得尤为重要，而日历软件无疑是管理时间不可或缺的工具之一。近日，一款名为“一个不错的日历-桌面显示”的桌面日历软件因其独特的设计和功能特性，赢得了广泛好评。它的...

    2023年日历-PDF格式

    首先，2023年日历-PDF格式的标题和描述简单明确地指出了文件的性质。PDF（ Portable Document Format）格式是一种电子文件格式，它能够很好地保持原始文档的格式和版面设计，无论在哪种操作系统或设备上打开，都能...

    java日历-时间选择

    在Java编程语言中，日历（Calendar）类是处理日期和时间的核心类，它提供了丰富的API来实现各种日期和时间操作。本知识点主要探讨如何在Java中创建、修改和使用日历对象，以及如何实现时间选择功能。 1. **日历类的...

    带标记的简易日历

    【描述】"带标记的简易日历带"虽然描述较短，但可以理解为这个日历功能具有轻量级的特点，可能只包含基本的日历显示和标记功能，没有过于复杂的附加特性。"带"字可能是表示日历显示的样式，可能有条形或者带状的布局...

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

    layui-laydate是一款非常实用的时间日历插件，它提供了丰富的功能和自定义选项，能够满足用户在网页中对日期和时间的选择需求。本篇文章将详细介绍laydate的使用方法，包括在layui模块中的使用和作为独立组件的使用...

    ios-简单的时间日历显示（精简版）.zip

    本项目“ios-简单的时间日历显示（精简版）”提供了一个基础的日历视图实现，旨在帮助开发者快速理解并实现类似功能。下面我们将详细探讨这个项目的知识点。 1. **日历框架**： iOS中的日期和时间处理主要依赖于`...

    MFC-日历显示

    在本文中，我们将深入探讨如何在MFC（Microsoft Foundation Classes）框架中实现日历和时间显示功能，这对于桌面应用程序的用户界面设计至关重要。MFC是微软提供的一个C++库，它为Windows API提供了一种面向对象的...

    工具-日历：年月日是分秒简单日历插件js日历时间插件

    "工具-日历：年月日是分秒简单日历插件js日历时间插件"是一个专为JavaScript环境设计的轻量级解决方案，它允许开发者在网页上轻松添加具有日期和时间选择功能的界面，且不依赖于jQuery库，提高了代码的简洁性和执行...

    CocosCreator开发简易日历

    在这个"简易日历"项目中，开发者利用CocosCreator的特性，构建了一个类似电脑桌面日历的应用。尽管这个日历可能不包含所有传统日历的功能，但它展示了如何在CocosCreator中实现基本的时间管理和用户界面设计。 首先...

    jquery 带时间的日历

    而“jquery 带时间的日历”是指利用jQuery和JavaScript来实现一个功能丰富的日历插件，这个插件不仅显示日期，还允许用户选择具体的时间。这种组件常用于在线预订系统、事件安排或者时间表应用中，提供用户友好的...

    带有时间选择的日历控件

    通过以上技术，我们可以创建一个高效、易用的带有时间选择的日历控件。这个控件不仅可以提高用户的输入效率，还能提升应用程序的整体用户体验。在实际应用中，可以根据具体需求进一步定制和扩展其功能。

    最全日历显示与时间选择

    在IT行业中，日历显示和时间选择是常见的用户界面元素，尤其在移动应用和Web应用中，它们扮演着至关重要的角色。"最全日历显示与时间选择"的Demo旨在提供一个简洁而实用的解决方案，帮助开发者快速实现天气预报相关...

    web前端---JS简易日历

    在这个项目中，我们关注的是一个“JS简易日历”，它利用JavaScript语言来创建一个视觉上吸引人的、功能简单的日历组件。JavaScript，作为Web开发中的主要脚本语言，允许我们在不刷新页面的情况下动态更新内容，从而...

    个性主题-带阴历和节日的JS日历 可换背景哦

    最后，关于标签“万年历”，这表示这个日历程序应该能够处理从公元前到公元后相当长的时间范围，涵盖多个世纪，提供完整的日期选择能力。而“带背景万年历”则强调了视觉效果和用户体验的结合。 总的来说，这个JS...

    NI Multisim 14.0 -简单电子日历

    电子日历的核心是时间的准确显示和存储。在Multisim中，我们可以选择集成的微控制器作为核心处理单元，例如ATmega系列的单片机。这些微控制器具有内置的计时器功能，可以实现日期和时间的精确计算。在设计中，需要...

    Android应用源码之简易日历中心-IT计算机-毕业设计.zip

    这篇文档将深入解析《Android应用源码之简易日历中心》这一项目，旨在为Android开发者，尤其是正在进行毕业设计的学生提供有价值的参考。这个源码Demo涵盖了Android应用开发的基础知识，包括UI设计、事件处理、数据...

    简单实用的桌面日历工具

    《简易桌面日历：高效生活的小助手》 在数字化时代，日程管理变得越来越重要，而桌面日历作为其中一种直观、便捷的工具，成为许多人的首选。"简单实用的桌面日历工具"正是这样一款专为日常事务管理设计的应用，它以...

    [推荐]桌面日历-Active Desktop Calendar

    总的来说，Active Desktop Calendar是一款集实用与美观于一体的桌面日历工具，它的存在使得时间管理变得更加简单和直观，是提高工作和生活质量的好帮手。通过充分利用其各项功能，用户可以更好地组织日程，提升效率...

    基于Vue2-Calendar改进的日历组件（含中文使用说明）

    4. **清除按钮**：当`clear=false`时，文本框右侧会显示清除按钮，模仿Bootstrap日历组件的样式。而当`clear=true`时，清除按钮不再显示，使得界面更加简洁。 接下来，我们将通过实例来展示如何使用这个改进后的...

Magicbox
Global site tag (gtag.js) - Google Analytics