Živá ukázka

Výsledek

<div id="month-content">                        
    <a href="#" class="decrease" title="Předchozí">Předchozí</a>                        
    <div id="yearpicker">2015
    </div>                        
    <a href="#" class="increase" title="Následující">Následující</a>                        
    <table id="months" data-url="/vlhkost/" data-minyear="2015" data-minmonth="4" data-maxyear="2018" data-maxmonth="11" data-selectedmonth="11" data-selectedyear="2018">                            
        <tr>                                
            <td data-month="1" title="Leden">Led</td>                                
            <td data-month="2" title="Únor">Úno</td>                                
            <td data-month="3" title="Březen" class="selected">Bře</td>                                
            <td data-month="4" title="Duben">Dub</td>                            
        </tr>                            
        <tr>                                
            <td data-month="5" title="Květen">Kvě</td>                                
            <td data-month="6" title="Červen">Čvn</td>                                
            <td data-month="7" title="Červenec">Čvc</td>                                
            <td data-month="8" title="Srpen">Srp</td>                            
        </tr>                            
        <tr>                                
            <td data-month="9" title="Září">Zář</td>                                
            <td data-month="10" title="Říjen">Říj</td>                                
            <td data-month="11" title="Listopad">Lis</td>                                
            <td data-month="12" title="Prosinec">Pro</td>                            
        </tr>                        
    </table>                    
</div>

HTML

Autoformát
Standardní režim
Mobilní zobrazení

#select-month {
	float: right;
	width: 240px;
	background-color: #ddddd4;
	border-radius: 7px;
	padding: 10px;
}
a.decrease, a.increase,
#yearpicker {
	font-size: 14px;
	display: inline-block;
	float: left;
	padding-left: 10px;
}
a.decrease, a.increase {
	width: 16px;
	text-indent: -9999px;
	background: url("../design/left-arrow.png") center center no-repeat;
}
a.increase {
	width: 16px;
	text-indent: -9999px;
	background: url("../design/right-arrow.png") right center no-repeat;
}

#month-content {
	background-color: #fff;
	border-radius: 3px;
	padding: 15px 20px 5px 20px;
	margin-top: 5px;
}
#month-content table {
	margin: 0;
	width: 200px;
	border: 0;
}
#month-content table td {
	border: 1px solid #bcbcbc;
	background-color: #e5e5e5;
	color: #000;
	cursor: pointer;
	line-height: 40px;
	text-align: center;
	font-weight: bold;
}
#month-content table td:hover,
#month-content table td.selected {
	background-color: #bcbcbc;
	border: 1px solid #bcbcbc;
	color: #000;
}
#month-content table td.disabled {
	border: 1px solid #bcbcbc;
	background-color: #e5e5e5;
	color: #cecece;
}
#month-content table td.disabled:hover {
	background-color: #e0e0e0;
	border: 1px solid #bcbcbc;
	color: #cecece;
}

CSS

Autoformát
CSS reset
Až na konci

var minYear = $('#months').data('minyear'),
    minMonth = $('#months').data('minmonth'),
    selectedYear = $('#months').data('selectedyear'),
    selectedMonth = $('#months').data('selectedmonth');

$(document).ready(function () {
    // month picker
    setMonthPickerRange();
    // highlight current month
    showDate();

$('a.decrease').click(function (e) {
        e.preventDefault();
        decreaseYear();

// highlight current month
        selectDate();
    });

$('a.increase').click(function (e) {
        e.preventDefault();
        increaseYear();

// highlight current month
        selectDate();
    });

$(document).on('click', '#months td:not(.disabled)', function () {
        var td = $(this),
            year = getYear(),
            month = getMonth(td);

selectMonthPickerItem(td);

window.location.href = $('#months').data('url') + year + '-' + month;
    });

// helper methods
    function decreaseYear() {
        removeSelectedClass();

var year = getYear();

if (typeof (minYear) === 'undefined' || year > minYear) {
            setYear(year - 1);
        }

setMonthPickerRange();
    }
    function increaseYear() {
        removeSelectedClass();

var year = getYear();
        if (year < getMaxYear()) {
            setYear(getYear() + 1);
        }

setMonthPickerRange();
    }
    function getYear() {
        return parseInt($('#yearpicker').text());
    }
    function getMaxYear() {
        // selects max year value
        var year = $('#months').data('maxyear');
        if (typeof (year) !== 'undefined') {
            return parseInt(year);;
        }
        return new Date().getFullYear();
    }
    function getMaxMonth() {
        // selects max month value
        var month = $('#months').data('maxmonth');
        if (typeof (month) !== 'undefined') {
            return parseInt(month);;
        }
        return new Date().getMonth() + 1;
    }
    function getMonth(element) {
        return parseInt(element.data('month'));
    }
    function setYear(year) {
        $('#yearpicker').text(year);
    }
    function selectMonthPickerItem(td) {
        removeSelectedClass();
        td.addClass('selected');
    }
    function removeSelectedClass() {
        $('#months td').removeClass('selected');
    }
    function setMonthPickerRange() {
        removeSelectedClass();
        $('#months td').removeClass('disabled');

var d = new Date(),
            year = getYear(),
            month = getMaxMonth();

if (typeof (minYear) !== 'undefined' && year == minYear && typeof (minMonth) !== 'undefined') {
            for (var i = 1; i < minMonth; i++) {
                $('#months td[data-month=' + i + ']').addClass('disabled');
            }
        }
        if (year == getMaxYear()) {
            for (var i = 12; i > month; i--) {
                $('#months td[data-month=' + i + ']').addClass('disabled');
            }
        }
    }
    // highlights the month
    function selectDate() {
        var year = getYear();
        if (typeof (selectedYear) !== 'undefined' && year == selectedYear && typeof (selectedMonth) !== 'undefined') {
            $('#months td[data-month=' + selectedMonth + ']').addClass('selected');
        }
    }
    function showDate() {

if (typeof (selectedYear) !== 'undefined' && typeof (selectedMonth) !== 'undefined') {
            var year = getYear();
            if (year > selectedYear) {
                for (var i = 0; i < year - selectedYear; i++) {
                    decreaseYear();
                }
            }
            selectDate();
        }
    }
});

JS

Autoformát
jQuery
Umístění JS