简易日期插件

一个小的日期插件，供大家玩完

/**
 *  A Calender Plugins Created by JJ
 *  Time : 2014/11/4
 * */
;
(function ($) {
    var LastDom = null;
    var Page = null;
    var current = null;
    var CallDom = null;
    var Left = null;
    var Top = null;
    $.Calender = function (dom) {
        if ($('body').find('.date')[0] != undefined) {
            $('.CalenderWrap').remove();
            return;
        }
        CallDom = dom;
        Left = event.clientX;
        Top = event.clientY;
        var pageCurrent = showDatePanel();
        pageCurrent.appendTo('body');
        pageCurrent.slideDown(1000);
        Page = pageCurrent;
        bindEvent();
    }

    var showDatePanel = function (year, month, day) {

        var ClassDate = null;
        if (arguments.length > 0) {
            ClassDate = new Date(year, month, day);
        } else {
            ClassDate = new Date();
        }

        var currentDay = {
            year: ClassDate.getFullYear(),
            month: ClassDate.getMonth(),
            day: ClassDate.getDate(),
            weekDay: ClassDate.getDay(),
            isLeapYear: (((ClassDate.getFullYear() % 4 == 0) && (ClassDate.getFullYear() % 100 != 0)) || (ClassDate.getFullYear() % 400 == 0))
        };
        current = currentDay;
        var currentDate = current.year + '/' + (current.month + 1) + '/' + current.day;
        var currentMonth = currentDay.month + 1;
        var temp = new Date(currentDay.year, currentDay.month, '1').getDay();
        var MaxDayOfMonth = currentDay.month <= 7 ? ((!(currentDay.month % 2)) ? (currentDay.month == 2 ? (currentDay.isLeapYear ? (29) : (28)) : (30)) : 31) : (!(currentDay.month % 2) ? (31) : (30));
        var MaxDayCurrent = currentMonth <= 7 ? ((!(currentMonth % 2)) ? (currentMonth == 2 ? (currentDay.isLeapYear ? (29) : (28)) : (30)) : (31)) : (!(currentMonth % 2) ? (31) : (30));
        var WeekTips = ['日', '一', '二', '三', '四', '五', '六'];
        var weekHtml = '<tr><td style="color: red">' + WeekTips[0] + '</td>';

        for (var i = 1; i < 7; i++) {
            weekHtml += '<th>' + WeekTips[i] + '</th>';
        }
        weekHtml += '</tr>';

        var dayHtml = "";
        (temp) && (dayHtml = '<tr><td style="color: red">' + (MaxDayOfMonth - temp + 1) + '</td>');
        for (var j = MaxDayOfMonth - temp + 2; j <= MaxDayOfMonth; j++) {
            dayHtml += '<td>' + j + '</td>';
        }

        for (i = 1; i <= MaxDayCurrent; i++) {
            var addContent = null;
            if ((i + temp) % 7 == 1) {
                addContent = '<td ><div  class="date" style="cursor:pointer;width:20px;height: 20px;border:0px solid red;display: inline-block;opacity: 0.5;color: red;">' + i + '</div></td>';
            } else {
                addContent = '<td ><div  class="date" style="cursor:pointer;width:20px;height: 20px;border:0px solid red;display: inline-block;opacity: 0.5;color: blue">' + i + '</div></td>';
            }
            if (currentDay.day == i && (new Date()).getMonth() == currentDay.month && (new Date()).getFullYear() == currentDay.year) {
                addContent = '<td>' + ($(addContent).find('div').css('background-color', "chartreuse"))[0].outerHTML + '</td>';
            }
            dayHtml += addContent;
            if ((i + temp) % 7 == 0) {
                dayHtml += '</tr><tr>';
            }
        }

        var leftDay = 7 - (MaxDayCurrent + temp) % 7;
        for (i = 1; i <= leftDay; i++) {
            dayHtml += '<td>' + i + '</td>';
            if ((MaxDayCurrent + temp + i) % 7 == 0) {
                dayHtml += '</tr><tr>';
            }
        }

        var innerContent =
            '<div class="CalenderWrap" style="cursor:pointer;width:250px;height: 200px;border: 2px solid black;display: none;left:' + Left + 'px; Top:' + Top + 'px;position: absolute">' +
                '<div id="controlBar" style="cursor:default;text-align: center"><div id="LastYear" style="display: inline;padding-right: 20px"><<</div> <div id = "LastMonth" style="display: inline;padding-right: 15px"><</div><div id ="dateShow" style="font-weight:bolder;color: red;display: inline">' + currentDate + '</div><div id="NextMonth" style="display: inline;padding-right: 20px;padding-left: 15px">></div> <div id="NextYear" style="display: inline">>></div></div>' +
                '<table id = "calenderTable"  width="250">' +
                weekHtml + dayHtml +
                '</table>' +
                '</div>';
        return  $(innerContent);
    };

    var bindEvent = function () {

        $('.date').mouseenter(function () {
            var _self = this;
            $(_self).css("border", "1px solid red");
        });
        $('.date').mouseleave(function () {
            var _self = this;
            // var content = $(_self).html();
            if ($(_self).attr('clickFlag') != 'true') {
                $(_self).css("border", "0px solid red");
            }
        });
        $('.date').click(function () {
            var _self = this;
            (LastDom != null) && ($(LastDom).css("border", "0px solid red")) && (LastDom.removeAttribute('clickFlag'));
            (_self).setAttribute('clickFlag', 'true');
            CallDom.value = current.year + '- ' + (current.month + 1) + '-' + $(_self).html();
            LastDom = _self;
            current.day = $(_self).html();
            var currentDate = current.year + '/' + (current.month + 1) + '/' + current.day;
            $('#dateShow').html(currentDate);
        });
        $('#LastYear').click(function () {
            var pageCurrent = showDatePanel(--current.year, current.month, current.day);
            Page.slideUp(500, function () {
                Page.remove();
                pageCurrent.appendTo('body');
                pageCurrent.slideDown(500);
                Page = pageCurrent;
                bindEvent();
            });
        });
        $('#NextYear').click(function () {
            var pageCurrent = showDatePanel(++current.year, current.month, current.day);
            Page.slideUp(500, function () {
                Page.remove();
                pageCurrent.appendTo('body');
                pageCurrent.slideDown(500);
                Page = pageCurrent;
                bindEvent();
            });
        });
        $('#LastMonth').click(function () {
            if (current.month - 1 < 0) {
                current.year--;
                current.month = 11;
            } else {
                current.month--;
            }
            var pageCurrent = showDatePanel(current.year, current.month, current.day);
            Page.slideUp(500, function () {
                Page.remove();
                pageCurrent.appendTo('body');
                pageCurrent.slideDown(500);
                Page = pageCurrent;
                bindEvent();
            });
        });
        $('#NextMonth').click(function () {
            if (current.month + 1 > 11) {
                current.year++;
                current.month = 0;
            } else {
                current.month++;
            }
            var pageCurrent = showDatePanel(current.year, current.month, current.day);
            Page.slideUp(500, function () {
                Page.remove();
                pageCurrent.appendTo('body');
                pageCurrent.slideDown(500);
                Page = pageCurrent;
                bindEvent();
            });
        });
    }
})(jQuery);

使用demo

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>CalenderTest</title>
        <script type = "text/javascript" src = "thirdparty/jquery.js"></script>
        <script type = "text/javascript" src = "CalenderPlugin/Calender.js"></script>
</head>
<body>
         <input  type="text" οnclick="$.Calender(this)"> </input>
</body>
</html>