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

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

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

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

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

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

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

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

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

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

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

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

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

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

Метки:

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

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