Простой календарь выбора даты на JS

JavaScript

Для работы календаря требуется подключенный JQuery UI.

Собственно заходим на http://code.jquery.com/ui/ и выбираем версию, которая больше нравится.

Далее подключаем его:

<script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link href='//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css' rel='stylesheet' type='text/css'>

Обратите внимание, что smoothness — это название темы (в зависимости от используемой темы будет по разному выглядеть календарь)

В вёрстку пихаем какой-нибудь инпут, под которым должен появляться календарь при клике:

<input type="text" class="calendar" name="date" value="">

Ну и собственно JS:

$(function() {
    $.datepicker.regional.ru = {
            closeText: "Закрыть",
            prevText: "&#x3C;Пред",
            nextText: "След&#x3E;",
            currentText: "Сегодня",
            monthNames: [ "Январь","Февраль","Март","Апрель","Май","Июнь",
            "Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь" ],
            monthNamesShort: [ "Янв","Фев","Мар","Апр","Май","Июн",
            "Июл","Авг","Сен","Окт","Ноя","Дек" ],
            dayNames: [ "воскресенье","понедельник","вторник","среда","четверг","пятница","суббота" ],
            dayNamesShort: [ "вск","пнд","втр","срд","чтв","птн","сбт" ],
            dayNamesMin: [ "Вс","Пн","Вт","Ср","Чт","Пт","Сб" ],
            weekHeader: "Нед",
            dateFormat: "dd.mm.yy",
            firstDay: 1,
            isRTL: false,
            showMonthAfterYear: false,
            yearSuffix: "" };
    $.datepicker.setDefaults( $.datepicker.regional.ru );

    $( ".calendar" ).datepicker({
        dateFormat: "dd.mm.yy",
        changeYear: true,
        minDate: new Date(2011, 6, 26),
        maxDate: new Date(2025, 11, 15),
        onSelect: function(date) {
            //здесь можно добавить обработчики выбора даты
        },
    });
});

Здесь $.datepicker.regional.ru — это по сути перевод календаря на русский язык.

В вызове minDate и maxDate используются для ограничения выбора дат в рамках интервала от minDate до maxDate.

Полная документация по календарику находится здесь.