От автора: приветствую вас! Позвольте представить вам очередной плагин из разряда must have. Сегодня мы познакомимся с простым и симпатичным плагином jQuery для выбора времени и установки его в поле формы. Это плагин Timedropper.
Плагин, с которым мы сегодня познакомимся, относится к разряду плагинов типа jQuery datepicker, то есть плагинов для работы с датой и временем, представленных зачастую в виде календариков. Сегодняшний плагин работает со временем и пригодится вам для всевозможных полей, где пользователь должен ввести некоторое время. Плагин jQuery выбор времени позволит упростить и сделать удобной процедуру выбора времени.
Итак, перейдем на официальную страничку плагина Timedropper по следующей ссылке. Здесь можно познакомиться с документацией к плагину jQuery для выбора времени, которая, к слову, очень проста. Давайте подключим файлы плагина jquery timepicker к нашей странице.
|
1 2 3 |
<link href="css/timedropper.css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/timedropper.js"></script> |
Далее нам потребуется поле, в которое пользователь будет вводить некое время:
|
1 |
<input type="text" id="time" class="form-control"> |
Ну и, само собой, метод плагина timeDropper(), который можно вызывать без дополнительных параметров:
|
1 2 3 |
$(function(){ $('#time').timeDropper(); }); |
Посмотрим на полученный результат. На странице появится поле формы с текущим временем на вашем клиенте:
Если теперь кликнуть по полю — мы увидим всплывающий стилизованный циферблат часов, на котором мы можем передвигать часовую и минутную стрелки, меняя тем самым время.
Согласитесь, смотрится эффектно. Ну а потратили мы всего несколько минут для получения такого эффекта выбора времени. Стоит упомянуть о полезной опции format, которая позволяет изменить формат времени на более привычный нам:
|
1 2 3 4 5 |
$(function(){ $('#time').timeDropper({ format: 'H:mm' }); }); |
Вот, собственно, и все. Как видите работа с плагином jQuery выбор времени очень проста. Используйте jQuery timepicker в ваших проектах и они понравятся посетителям. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и JavaScript вы можете узнать из наших уроков или курса. Удачи!
