Calendar - Date Time Picker

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    #calendar {
        display: block;
        width: 616px;
        height: 384px;
        font-family: "Helvetica","Arial", "sans-serif";
    }

    #calendar .month:last-child {
        border-right: 1px solid #00B7FF;
    }

    .month {
        display: block;
        border-left: 1px solid #00B7FF;
        width: 50px;
        height: 100%;
        float: left;
        font-size: 10px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }


    .calendar-header {
        text-align: center;
        font-size: 12px;
        font-weight: bolder;
    }

    .month-header {
        display: block;
        background-color: #1449C4;
        color: #00B7FF;
        font-weight: bolder;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

/* #1449C4
 #00B7FF*/

    .month:hover .day {
        border-bottom: 1px solid #1449C4;
    }

    .day {
        display: block;
        height: 11px;
        border-bottom: 1px solid #00B7FF;
        font-size: 8px;
    }

    .month:hover {
        background-color: #00B7FF;
    }

    .day:hover {
        background-color: #1449C4;
        color: white;
    }
</style>
<body>
    <div id="calendar">
        <div class="calendar-header">Year: 2013</div>
    </div>
</body>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
$(function () {

    var daysInMonth = function (year, month) {
        return new Date(year, month, 0).getDate();
    }
    var months = [ "January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December" ];

    var year = 2013;
    var start = new Date(year, 0, 1);
    var end = new Date(year, 11, 31);
    var $year = $('#calendar');
    for(var m = 1; m < 13; m++) {

        var $month = $('<div class="month"></div>');
        $month.append('<div class="month-header">'+ months[m-1] +'</div>');

        var days = daysInMonth(year, m);

        for(var d = 1; d <= days; d++) {
            var $day = $('<div class="day" data-day="'+ new Date(year, m, d) +'">'+ d +'</div>');
            $day.mouseover(function () { console.log($(this).attr('data-day')); });
            $day.click(function () {
                var date = $(this).attr('data-day');
                date = new Date(date);
                alert(date);
            });
            $month.append($day);
        }
        $year.append($month);
    }
});
</script>