Топ плагинов jQuery. Плагин jQuery Timedropper для выбора времени

Топ плагинов jQuery. Плагин jQuery Timedropper для выбора времени

От автора: приветствую вас! Позвольте представить вам очередной плагин из разряда must have. Сегодня мы познакомимся с простым и симпатичным плагином jQuery для выбора времени и установки его в поле формы. Это плагин Timedropper.

Плагин, с которым мы сегодня познакомимся, относится к разряду плагинов типа jQuery datepicker, то есть плагинов для работы с датой и временем, представленных зачастую в виде календариков. Сегодняшний плагин работает со временем и пригодится вам для всевозможных полей, где пользователь должен ввести некоторое время. Плагин jQuery выбор времени позволит упростить и сделать удобной процедуру выбора времени.

Итак, перейдем на официальную страничку плагина Timedropper по следующей ссылке. Здесь можно познакомиться с документацией к плагину jQuery для выбора времени, которая, к слову, очень проста. Давайте подключим файлы плагина jquery timepicker к нашей странице.

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

Далее нам потребуется поле, в которое пользователь будет вводить некое время:

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

Ну и, само собой, метод плагина timeDropper(), который можно вызывать без дополнительных параметров:

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

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

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

Посмотрим на полученный результат. На странице появится поле формы с текущим временем на вашем клиенте:

Топ плагинов jQuery. Плагин jQuery Timedropper для выбора времени

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

Топ плагинов jQuery. Плагин jQuery Timedropper для выбора времени

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

$(function(){
 $('#time').timeDropper({
  format: 'H:mm'
 });
});

Топ плагинов jQuery. Плагин jQuery Timedropper для выбора времени

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

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

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&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