Datepicker

by levchenko_d

HTML

<div class="_calendar"></div>
<div id="result"></div>

CSS

._calendar {
    width: 250px;
    background: #f2f2f2;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
}
._calendar h2 {
    text-align: center;
    background: #34383e;
    color: white;
    font-size: 18pt;
    font-weight: 100;
}
._calendar i {
    float: left;
}
._calendar i:last-of-type {
    float: right;
    padding: 0 10px;
}
._days {
    width: 90%;
    margin: 0px auto;
    padding: 0 0 15px;
}
._calendar span {
    display: inline-table;
    width: 10%;
    margin-right: 5%;
    color: #34383e;
    text-align: center;
    cursor: pointer;
}
._calendar span:hover {
    box-shadow: inset 0 0 0 2px #00b0ef;
}
._calendar span:nth-of-type(7n) {
    color:red;
    margin:0;
}
._calendar span.__today {
    font-weight: 900;
    color: black;
}

JavaScript

var Calendar = function (date) {
    var d = date ? new Date(date) : new Date(),
        year = d.getFullYear(),
        month = d.getMonth(),
        cDate = d.getDate(),
        day = d.getDay(),
        fDay = new Date(year, month).getDay(),
        calendars = document.querySelectorAll('._calendar'),
        mn = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
        onselect;

    this.onselect = function (fn) {
        onselect = fn;
    }

    function daysInMonth(year, month) {
        var m = month + 1;
        return new Date(year, m, 0).getDate();
    }

    function append(days) {
        var list = '';
        var firstDay = 0;
        var dim = 0;
        for (var i = fDay > 1 ? (1 - (fDay - 1)) : -5; i <= days; i++) {

            var cl = cDate === i ? '__today' : '';
            var val = year + '/' + (month + 1) + '/' + i;
            list += i > 0 && '<span class="' + cl + '" data-value="' + val + '">' + i + '</span>' || '<span></span>';

        }

        return '<h2><i id="c-prev-month"><</i>' + mn[month] + '&nbsp ' + year + '<i id="c-next-month">></i></h2><div class="_days">' + list + '</div>';
    };

    function next() {
        var nextMonth = month + 1 < 13 ? month + 1 : 0;
        new Calendar(new Date(year, nextMonth, 1).getTime())
    };

    function prev() {
        var prevMonth = month - 1 > -2 ? month - 1 : 12;
        new Calendar(new Date(year, prevMonth, 1).getTime())
    };

    this.html = append(daysInMonth(d.getYear(), d.getMonth()));

    for (var i = 0; i < calendars.length; i++) {
        calendars[i].innerHTML = this.html;
    }

    document.getElementById('c-prev-month').onclick = function () { prev(); }

    document.getElementById('c-next-month').onclick = function () { next(); }

    var select = function (val) {
        document.getElementById('result').innerHTML = val;
        onselect(val)
    }

    var days =...