原生JS时间日期代码

Html

Css

//获取框架里的元素  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 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()
    })
})()

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.7.2

立即下载

原生JS时间日期代码



代码描述：原生JS实现简洁的时间日期控件代码

原生JS实现简洁的时间日期控件代码，原生JS实现，不依赖任何框架，可自由选择年月日和具体时间，当前日期会高亮显示。

6

最新

发表评论全部评论

暂时没有评论！

*yzx0

2018/4/28 15:52:12

-----不会用啊老哥。回复

罄?一瞥0

2017/6/10 15:39:23

厉害了，这个要js用几年才能写出来啊？

qiwanglove0

2017/6/20 11:18:41

慢慢学呗，用不了很长时间

罄?一瞥0

2017/6/29 15:24:51

请问你有什么好的学习js方法吗

回复

qiwanglove0

2017/5/12 16:07:25

如果有基础看得懂的话，可以修改日期表的样式大小之类的属性。可以去掉时分秒。比起插件来，好控制的多。

刘小花的日常i0

2020/10/23 17:24:44

大神请问怎么能去掉时间部分呢

回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

qiwanglove

相关代码

原生JS时间日期代码

最新