CODYSHOP
темы и плагины для WordpressНебольшой и мощный jQuery плагин для создания элемента управления с выбором даты. Думаю, что вам очень понравится оформление. Скачать.
Для работы, нам необходимо подключить библиотеку jQuery, и по одному файлу CSS и jQuery.
<!doctype html>
<html>
<head>
<link href="datedropper.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="datedropper.js"></script>
</head>
<body>
<input type="text" data-lang="ru" />
<script>
jQuery('input').dateDropper();
</script>
</body>
</html>Краткие пояснения
Календарь привязываем к полю ввода input.
<input type="text" data-lang="ru" />
Для инициализации плагина, воспользуемся вызовом метода dateDropper().
<script>
jQuery('input').dateDropper();
</script>
Посмотрим, что у нас получилось. При клике по полю ввода, у нас появится стильный блок с выбором. Как видим очень даже неплохо. При наведении на элемент даты (месяц, число, год) появляются стрелки влево и вправо, которые позволяют листать соответствующие части даты.
Плагин имеет множество настроек. Это позволит создавать более сложные проекты. Например, выбор месяца и года в разных input.
<input type="text" class="r input short datedropper picker-input" placeholder="Try it yourself!" data-format="m" data-translate-mode="true" data-id="datedropper-1" readonly=""> <input type="text" class="r input short datedropper picker-input" placeholder="Try it yourself!" data-format="Y" data-min-year="2016" data-max-year="2030" data-id="datedropper-2" readonly="">
Настройки
default-date
Эта опция дает возможность задать начальную дату. Обратите внимание, что вы должны придерживаться формата (мм-ДД-ГГГГ), чтобы плагин правильно распознал месяц, день и год. Пример:
data-default-date="11-13-2016"
disabled-days
Эта опция дает возможность установить череда дней отключен. Так, раздельных все дни запятую и выбора преобразует их в массив. Обратите внимание, что вы должны следовать в этом формате (мм/ДД/ГГГГ) для обеспечения соответствия распознавать месяц, день и год. Пример:
data-disabled-days="12/13/2016,12/14/2016,12/15/2016"
format
Выбор формат даты. Пример:
data-format="F S, Y"
lang
Выбор языка (В версии 3.0 – более 15). Есть поддержка русского. Пример:
data-lang="ru"
Есть и другие настройки. Более подробно можно посмотреть в документации.