Календарь для выбора даты js: datepicker jquery UI

В данной статье рассмотрим, как к простому полю в форме, привязать календарь для выбора даты (input type="text") с помощью библиотеки jquery UI.

Тут всё просто, подключим сначала библиотеку js и его стили css

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Далее, нам нужно будет создать текстовое поле с уникальным id, для привязки (можно и класс).

<p>Дата: <input type="text" id="datepicker"></p>

Теперь вызываем небольший скрипт, для включения выбора даты данного поля.

$(function() {
    $("#datepicker").datepicker();
});

После этого, при клике на данное поле, будет показываться форма выбора даты. Но она будет на английском языке.

Чтобы поставить русский язык, скачайте следующий скрипт и подключите его. Скачать

Подключить его нужно будет ниже подключаемого самого скрипта библиотеки, затем измените сам вызов для формы на следующий.

$(function() {
    $("#datepicker").datepicker($.datepicker.regional["ru"]);
});