Топ плагинов jQuery. Плагин jQuery календарь DateDropper

Топ плагинов jQuery. Плагин jQuery календарь DateDropper

От автора: и снова здравствуйте. Позвольте представить вам очередной плагин из разряда must have. Давайте поработаем с еще одним плагином – речь идет о расширении jQuery календарь под названием DateDropper. Уверен, вам понравится этот jQuery календарь даты – смотрится он очень интересно.

В сети можно найти множество различных видов плагинов jQuery календарь для выбора даты. Это и известные jQuery UI календарь, и jQuery календарь даты для Bootstrap, и десятки других календарей. Мы сегодня рассмотрим один из таких плагинов jQuery календаря даты.

Итак, познакомиться с документацией к плагину jQuery календарь и примерами его использования можно на этом сайте. Там же можно и скачать сам плагин календаря. Также можете взять его файлы из исходников статьи. Подключим файл стилей и сам скрипт календаря.

<link href="css/datedropper.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/datedropper.js"></script>

Теперь нам потребуется поле для ввода некоторой даты, именно к этому полю мы и прикрутим jQuery календарь.

<input type="text" class="form-control" id="date">

Осталось инициализировать плагин вызовом метода dateDropper().

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
$(function(){
 $('input').dateDropper();
});

Посмотрим, получилось ли у нас что-то. Для этого кликнем по полю формы.

Топ плагинов jQuery. Плагин jQuery календарь DateDropper

Великолепно! Плагин jQuery календарь работает и смотрится очень круто. При наведении на элемент даты (месяц, число, год) появляются стрелки влево и вправо, которые позволяют листать соответствующие части даты. Также мы можем сделать быстрый выбор просто кликнув по нужному сегменту, например кликнем по месяцу.

Топ плагинов jQuery. Плагин jQuery календарь DateDropper

В общем, все интуитивно понятно и, главное, полученный календарь смотрится очень оригинально. Также плагин jquery datedropper имеет множество опций, с полным списком которых можно ознакомиться в документации. Например, давайте русифицируем плагин и изменим формат даты, которая будет добавлена в поле даты после выбора:

$(function(){
 $('input').dateDropper({
  lang: 'ru',
  format: 'd-m-Y'
 });
});

После этого календарик будет русифицирован:

Топ плагинов jQuery. Плагин jQuery календарь DateDropper

И выбранная дата примет привычный нам формат: день-месяц-год.

Топ плагинов jQuery. Плагин jQuery календарь DateDropper

Надеюсь, данный вариант jQuery календаря вам пришелся по нраву, и вы найдете ему применение. На этом у меня сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и JavaScript вы можете узнать из наших уроков или курса. Удачи!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree