[转]一种简单的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 ...

随机推荐

通知中心 NSNotificationCenter 的简单使用方法
NSNotificationCenter(通知中心) [注意]需再dealloc中移除观察者获取通知中心单例对象 NSNotificationCenter *center=[NSNotifi ...
工厂模式，根据ID创建对应的实例类
工厂模式,根据ID创建对应的实例类 // // main.cpp // TestCPP1 // // Created by bianchx on 15/4/27. // Copyright (c) 2 ...
C#入门经典Lambda
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Lamb ...
Xml的简单介绍和Xml格式
XML 被设计用来结构化.存储以及传输信息.HTML 被设计用来显示数据. 1.XML是什么? 1)XML 指可扩展标记语言(EXtensible Markup Language) 2)XML 是一种 ...
转载：《TypeScript 中文入门教程》 10、混入
版权文章转载自:https://github.com/zhongsp 建议您直接跳转到上面的网址查看最新版本. 介绍除了传统的面向对象继承方式,还流行一种通过可重用组件创建类的方式,就是联合另一个 ...
less
//:此注释不会被编译 /**/:会被编译变量:以@开头,exp:@test_width:100px; 混合: 匹配: 运算: 嵌套: arguments:将所有的变量带进去
本地部署arcgis by eclipse
首次来博客园发帖,从本地部署arcgis api开始吧: 首先还是下载arcgis的api包开始,在中国区官网下载arcgis包: 1.http://support.esrichina.com.cn/ ...
kmdjs api reference
总览 kmdjs的主要就两个API:kmdjs.config和define kmdjs.config kmdjs.config是用于项目整体配置,一般的配置如下所示: kmdjs.config({ n ...
iOS Block界面反向传值
在上篇博客 <iOS Block简介> 中,侧重解析了 iOS Block的概念等,本文将侧重于它们在开发中的应用. Block是iOS4.0+ 和Mac OS X 10.6+ 引进的对C ...
SharePoint 2013 激活标题字段外的Menu菜单
前言 SharePoint 有个很特别的字段,就是标题(Title)字段,无论想要链接到项目,还是弹出操作项目的菜单,都是通过标题字段,一直以来需要的时候,都是通过将标题字段改名进行的. 其实,Sha ...

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

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

随机推荐

热门专题