Небольшой и мощный 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"

Есть и другие настройки. Более подробно можно посмотреть в документации.

Добавить комментарий