Для работы календаря требуется подключенный 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: "<Пред", nextText: "След>", 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.
Полная документация по календарику находится здесь.