[转]一种简单的js时间控件

使用方法:

粘贴代码到文本文档中,文档名称为datetime.js,然后在html文件中引用如下代码即可

注意type="text" class="sang_Calender"不可变,文件路径写即可使用

代码如下:

(function(){

    var d=document,

        w=window,

        isIE=w.navigator.appVersion.indexOf("MSIE")>-1,

        now=new Date(),

        nowM=now.getMonth();

        nowY=now.getFullYear();

        date=null,

        ids=null,

        oInput=null;

    document.write('<iframe frameborder=0 style="display:none;position:absolute;" width="200" height="215" scrolling="no" name="sangcalender" id="sangcalender"></iframe>');

    var f=window.frames['sangcalender'];

    var ff=d.getElementById('sangcalender');

    var fd=f.document;

    fd.open();

    fd.write('<!DOCTYPE html><html><head><style type="text/css">#yearL, #monthL, #monthR, #yearR, #hoursL, #hoursR, #minL, #minR, #y, #m, #h, #i, #s{cursor:pointer;}.calenderClose a{display:block;width:13px;line-height:13px;border:1px solid #cccccc;background-color:#eeeeee;color:#666; text-decoration:none}.calenderClose a:hover{color:red}td{text-align:center}#calenderDay{cursor:pointer}body{font-size:12px;padding:0;margin:0}.col666{color:#999}.bg9ebdd6{background-color:#9ebdd6}</style></head><body onselectstart="return false" style="-moz-user-select:none" oncontextmenu="return false">')

    fd.write('<table width="100%" border="0" bgcolor="#CCCCCC" cellspacing="1" cellpadding="0">'+

             '<tr><td><table border="0" cellspacing="0" bgcolor="#6699FF" cellpadding="0" width="100%">'+

             '<tr><td width="20" height="25" align="center" id="yearL" title="上一年">&lt;&lt;</td>'+

             '<td width="12" align="center" id="monthL" title="上一月">&lt;</td><td align="center">'+

             '<span id="y" title="点击选择年份"></span>年<span id="m" title="点击选择月份"></span>月</td>'+

             '<td width="12" align="center" id="monthR" title="下一月">&gt;</td>'+

             '<td width="20" align="center" id="yearR" title="下一年">&gt;&gt;</td></tr></table></td></tr>'+

             '<tr bgcolor="#FFFFFF"><td><table width="100%" border="0" bgcolor="#9999FF" cellspacing="1" cellpadding="0">'+

             '<tr bgcolor="#CCCCFF" height="18"><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr></table></td></tr>'+

             '<tr bgcolor="#FFFFFF"><td><div id="calenderDay"></div></td></tr>'+

             '<tr><td><table border="0" bgcolor="#eeeeee" cellpadding="0" cellspacing="0" width="100%">'+

             '<tr><td align="center" height="20" id="hoursL" title="时减少">&lt;&lt;</td>'+

             '<td align="center" id="minL" title="分减少">&lt;</td>'+

             '<td align="center"><span id="h" title="点击选择小时"></span>:<span id="i" title="点击选择分"></span>:<span id="s" title="点击选择秒"></span></td>'+

             '<td align="center" id="minR" title="分增加">&gt;</td><td align="center" id="hoursR" title="时增加">&gt;&gt;</td></tr>'+

             '</table></td></tr></table>');

    fd.write('</body></html>');

    fd.close();

    //获取框架里的元素  gids.call(obj,id)

    function gids(idArr){

        var oId=[];

        for(var i=0,len=idArr.length;i<len;i++){

            oId[idArr[i]]=this.getElementById(idArr[i]);

        }

        return oId;

    }

    //需要添加事件的元素的集合

    var idsArr=['yearL','yearR','y','m','monthL','monthR','hoursL','hoursR','minL','minR','calenderClose','calenderDay','h','i','s'];

    if(!ids){ids=gids.call(fd,idsArr)};

    //格式化日历控件

    function formatDay(timestr){

        var t=/(\d+)-(\d+)-(\d+)\s*(\d*):?(\d*):?(\d*)/.exec(timestr);

        var da=null;

        var dn=getdate(now);

        if(t){

            da=new Date(t[1],t[2]-1,1,t[4],t[5],t[6]);

        }else{

            da=new Date(dn['y'],dn['m'],1,dn['h'],dn['i'],dn['s']);

        }

        date=getdate(da);

        var mon=[31,date['y']%4==0?29:28,31,30,31,30,31,31,30,31,30,31];

        var str="",day=1;

        str+='<table width="100%" border="0" bgcolor="#cecece" cellspacing="1" cellpadding="0">';

        for(var md=mon[date['m']-1],wd=md-date['w']+1,n=0;n<6;n++){

            str+='<tr bgcolor="#ffffff" height="23">';

            for(var nn=0;nn<7;nn++){

                if(wd<=md){

                    str+='<td class="col666">'+wd+'</td>';

                    wd++;

                }else {

                    if(day<=mon[date['m']]){

                        if(day==dn['d'] && nowM==now.getMonth()&&nowY==now.getFullYear()){

                            str+='<td class="bg9ebdd6">'+(day++)+'</td>';

                        }else{

                            str+='<td>'+(day++)+'</td>';

                        }

                        var day2=1;

                    }else{

                        str+='<td class="col666">'+(day2++)+'</td>';

                    }

                }

            }

            str+='</tr>';

        }

        str+='</table>';

        ids['calenderDay'].innerHTML=str;

        var dates=[date['y'],fillzero(date['m']+1),fillzero(date['h']),fillzero(date['i']),fillzero(date['s'])];

        each.call([ids['y'],ids['m'],ids['h'],ids['i'],ids['s']],function(o,i){o.innerHTML=dates[i]});

        each.call(ids['calenderDay'].getElementsByTagName("td"),function(o,i){

            addEvent(o,"mouseover",function(e){

                o.style.backgroundColor="#9ebdd6";

            })

            addEvent(o,"mouseout",function(e){

                o.style.backgroundColor="";

            })

            addEvent(o,"click",function(e){

                if(o.className=="col666"){return}

                oInput.value=ids['y'].innerHTML+"-"+ids['m'].innerHTML+"-"+ fillzero(o.innerHTML)

                            +" "+ids['h'].innerHTML+":"+ids['i'].innerHTML+":"+ids['s'].innerHTML;

                hide();

            })

        })

    }

    //为按钮添加事件

    var handlers=[yL,yR,mL,mR,hL,hR,iL,iR];

    each.call([ids['yearL'],ids['yearR'],ids['monthL'],ids['monthR'],ids['hoursL'],ids['hoursR'],ids['minL'],ids['minR']],function(o,i){

        addEvent(o,"click",handlers[i]);

    })

    var clicks=[yClick,mClick,hClick,iClick,sClick];

    each.call([ids['y'],ids['m'],ids['h'],ids['i'],ids['s']],function(o,i){

        addEvent(o,"click",clicks[i]);

    })

    //获取元素位置

    function getPos(e){

        var x,y,e=typeof e=="string"?d.getElementById(e):e,p=[];

        x=e.offsetLeft;

        y=e.offsetTop;

        while(e=e.offsetParent){

            x+=e.offsetLeft;

            y+=e.offsetTop;

        }

        p['x']=x;p['y']=y;

        return p;

    }

    //上一年

    function yL(){

        now.setFullYear(date['y']-1);

        formatDay();

    }

    //下一年

    function yR(){

        now.setFullYear(date['y']+1);

        formatDay();

    }

    //上一月

    function mL(){

        now.setMonth(date['m']-1);

        formatDay();

    }

    //下一月

    function mR(){

        now.setMonth(date['m']+1);

        formatDay();

    }

    //时增加

    function hR(){

        now.setHours(date['h']+1);

        formatDay();

    }

    //时减少

    function hL(){

        now.setHours(date['h']-1);

        formatDay();

    }

    //分增加

    function iR(){

        now.setMinutes(date['i']+1);

        formatDay();

    }

    //分减少

    function iL(){

        now.setMinutes(date['i']-1);

        formatDay();

    }

    //为SELECT添加事件

    function addEventForSelect(type){

        function changeInner(){

            ids[type].innerHTML=fillzero(oSelect.value);

            now.setFullYear(ids['y'].innerHTML);

            now.setMonth(Number(ids['m'].innerHTML)-1);

            now.setHours(ids['h'].innerHTML);

            now.setMinutes(ids['i'].innerHTML);

            now.setSeconds(ids['s'].innerHTML);

            formatDay();

        }

        var oSelect=gids.call(fd,['calenderSelect'])['calenderSelect'];

        oSelect.focus();

        addEvent(oSelect,'change',changeInner);

        addEvent(oSelect,"blur",changeInner);

    }

    //生成option选项

    function createOption(type,v){

        var str='',str2='',i=0,i2=0;

        function create(i,i2){

            while(i>=i2){

                if(v==i){

                    str2+='<option value="'+i+'" selected>'+i+'</option>';

                }else{

                    str2+='<option value="'+i+'">'+i+'</option>';

                }

                i--;

            }

            str+=str2+'</select>';

            ids[type].innerHTML=str;

            addEventForSelect(type);

        }

        str+='<select id="calenderSelect">';

        if(type=="y"){

            i=2011;i2=1990;

            create(i,i2);

            return;

        }

        if(type=="m"){

            i=1;i2=12;

        }

        if(type=="h"){

           i=00;i2=23;

        }

        if(type=="i"){

            i=00;i2=59;

        }

        if(type=="s"){

            i=00;i2=59;

        }

        create(i2,i);

    }

    //年鼠标点击

    function yClick(e){

        if(getTarget(e).tagName.toLowerCase()=="span"){

            createOption("y",ids['y'].innerHTML);

        }

    }

    //月鼠标点击

    function mClick(e){

        if(getTarget(e).tagName.toLowerCase()=="span"){

            createOption("m",ids['m'].innerHTML);

        }

    }

    //时鼠标点击

    function hClick(e){

        if(getTarget(e).tagName.toLowerCase()=="span"){

            createOption("h",ids['h'].innerHTML);

        }

    }

    //分鼠标点击

    function iClick(e){

        if(getTarget(e).tagName.toLowerCase()=="span"){

            createOption("i",ids['i'].innerHTML);

        }

    }

    //秒鼠标点击

    function sClick(e){

        if(getTarget(e).tagName.toLowerCase()=="span"){

            createOption("s",ids['s'].innerHTML);

        }

    }

    //each方法

    function each(handler){

        var o=null;

        for(var i=0,len=this.length;i<len;i++){

            o=typeof this[i]=="string"?fd.getElementById(this[i]):this[i];

            handler(o,i);

        }

    }

    //如果日期为一位数，则在前面补零

    function fillzero(str){

        var str=typeof str=="string"?str:str.toString();

        if(str.length==1){

            str="0"+str;

        }

        return str;

    }

    //获取时间

    function getdate(da){

        var date=[];

        date['y']=da.getFullYear();

        date['m']=da.getMonth();

        date['d']=da.getDate();

        date['w']=da.getDay();

        date['h']=da.getHours();

        date['i']=da.getMinutes();

        date['s']=da.getSeconds();

        return date;

    }

    //阻止默认事件

    function preventDefault(e){

        var e=e||window.event;

        if(e.preventDefault){

            e.preventDefault();

        }else{

            e.returnValue=false;

        }

    }

    function getTarget(e){

        var e=e||window.event;

        return e.srcElement||e.target;

    }

    //显示日历控件

    function show(o){

        var s=o.value;

        var p=getPos(o);

        if(s){

            formatDay(s);

        }else{

            now=new Date();

            formatDay();

        }

        ff.style.left=p['x']+"px";

        ff.style.top=p['y'] + o.offsetHeight + "px";

        ff.style.display="block";

    }

    //隐藏日历控件

    function hide(){

        ff.style.display="none";

    }

    //添加事件

    function addEvent(element,event,handler){

        var element=typeof element=="string"?d.getElementById(element):element;

        if(element.addEventListener){

            element.addEventListener(event,handler,false)

        }else if(element.attachEvent){

            element.attachEvent("on"+event,handler);

        }else{

            element["on"+event]=handler;

        }

    }

    //获取要实现控件的表单

    function getObj(className){

        var o=d.getElementsByTagName('*'),oArr=[];

        for(var i=0,len=o.length;i<len;i++){

            if(o[i].className==className){

                oArr.push(o[i])

            }

        }

        return oArr;

    }

    each.call(getObj("sang_Calender"),function(o,i){

        addEvent(o,"click",function(e){preventDefault(e);oInput=o,show(o);ff.focus()})

    })

    //var iframeObj=isIE?ff:f;

    addEvent(isIE?ff:f,"blur",function(e){hide()})

})()

[转]一种简单的js时间控件的更多相关文章

一款比较好用的JS时间控件-laydate
官方讲解:http://laydate.layui.com/ 具体的内容请看官方讲解,此处仅说名应用: 1.在jsp或html或其他中引入laydate.js <script src=&qu ...
JS时间控件 moment.js用法
参考http://momentjs.cn/ 下载 moment.js moment.min.js 12.4k moment+多语言支持.js moment+多语言支持.min.js 45.4k 安装 ...
只显示年月的js时间控件纯手写
<style> #date { text-align: center; } .td { cursor: pointer; } </style> <script> f ...
bootstrap-datetimepicker时间控件
欢迎各种吐槽. 本人小前端,学习过程中,某日遇到做时间控件的需求,于是无休止的召唤了度娘,发现看不太懂.算是为自己做个笔记,也便于菜鸟级别的看的懂. 首先,我们看看点击选择时间的时候的展示页面吧年 ...
Bootstrap 时间控件datetimepicker与timepicker
一.datetimepicker 首先,我们看看点击选择时间的时候的展示页面吧年月 ...
js设置控件的隐藏与显示的两种方法
js设置控件的隐藏与显示,设置控件style的display和visibility属性就可以了,下面有个示例,需要的朋友可以参考下用JavaScript隐藏控件的方法有两种,分别是通过设置控件的sty ...
WdatePicker.js的使用方法帮助文档使用说明(时间控件)
WdatePicker.js的使用方法帮助文档使用说明(时间控件) 4. 日期范围限制静态限制注意:日期格式必须与 realDateFmt 和 realTimeFmt 一致你可以给通过配 ...
easyui时间控件用js实时获取选定的时间的取法
easyui时间控件用js实时获取选定的时间的取法var datetime=$("#id").datetimebox("getValue");不能用 $(& ...
js实现时间控件
<html><head> <title>时间控件</title></head><body > <input name=&q ...

随机推荐

ASP.NET vNext总结：EntityFramework7
ASP.NET vNext总结:EntityFramework7 源码分享:http://www.jinhusns.com/Products/Download/?type=xcj 1.概述关于EF7 ...
csharp:ASP.NET SignalR
http://signalr.net/ https://github.com/SignalR/SignalR http://www.asp.net/signalr http://www.cnblogs ...
ArcGIS标注
关于ArcGIS的标注问题整理. 要求: 保留小数点后三位, 若原数据小于1(.12345),对小数加0显示分行显示两个字段值解决: 右击图层 -- ”properties“(属性) 中选择“la ...
MyBatis的mapper
在前面的学习中,我们还在写一些接口啊,实现类啊,是不是感觉好low的... 其实,我们是可以不用写接口的实现类的,今天就带着大家一起学习一下,当然,我是回顾的. 看下面的结构,是不是没实现类呢! 源码 ...
Lind.DDD.Domain.ISortBehavor～上移与下移
在进行列表排序时,有个“上移”和“下移”操作,这个一般在内存里完成,然后统一提交到数据库中,对于上移与下移的设计,大叔在LIND.DDD.DOMAIN里有一个ISortBehavor接口,主要是说,如 ...
RequireJS入门之一——实现第一个例子
为什么学习RequireJS? 像我这种菜鸟,会提到海量文章里提到的AMD.JS模块化编程.异步... ... 等等 RequireJS是一个Javascript 文件和模块框架,它可以帮我们去管理j ...
[C/C++] DebugBreak
在代码中直接调用DebugBreak()函数,可以使程序中断运行,和在IDE中设置断点中断运行的道理是一样的. 用这种方式,一些情况下比打断点更方便调试,如下,在test()函数返回0时激活断点 #i ...
使用javascript和canvas画月半弯
使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...
javascript如何设置DIV背景色为随机色
随机色有两种格式: 效果预览:http://wjf444128852.github.io/DEMOLIST/JS/test/index.html 1.rgb(xxx,xxx,xxx) 2.#xxxxx ...
iOS开发-UI 从入门到精通(五)
近日在做项目的时候,为了快捷适配屏幕采用了Storyboard,添加约束以后运行后发现一个问题(下面将以普通案例展示该问题);在4.7 甚至更大的屏幕下是没有问题的,如下图(4.7屏幕): 但是放到更 ...

[转]一种简单的js时间控件

[转]一种简单的js时间控件的更多相关文章

随机推荐

热门专题