Від автора: вітаю вас! Дозвольте представити вам черговий плагін з розряду must have. Сьогодні ми познайомимося з простим і симпатичним плагіном jQuery для вибору часу і встановлення його в поле форми. Це плагін Timedropper.
Плагін, з якими ми сьогодні познайомимося, відноситься до розряду плагінів типу jQuery datepicker, тобто плагінів для роботи з датою і часом, представлених найчастіше у вигляді календариків. Сьогоднішній плагін працює з часом і стане в нагоді вам для всіляких полів, де користувач повинен ввести деякий час. Плагін jQuery вибір часу дозволить спростити і зробити зручною процедуру вибору часу.
Отже, перейдемо на офіційну сторінку плагіна Timedropper за наступним посиланням. Тут можна познайомитися з документацією до плагіну jQuery для вибору часу, яка, до речі, дуже проста. Давайте підключимо файли плагін jquery timepicker до нашої сторінці.
Далі нам буде потрібно поле, у якому користувач буде вводити якесь час:
Ну і, само собою, метод плагіна timeDropper(), який можна викликати без додаткових параметрів:
$(function(){
$(‘#time’).timeDropper();
});
Подивимося на отриманий результат. На сторінці з’явиться поле форми з поточним часом на вашому клієнті:
Якщо тепер клацнути по полю — ми побачимо спливаючий стилізований циферблат годинника, на якому ми можемо пересувати годинну і хвилинну стрілки, змінюючи тим самим час.
Погодьтеся, виглядає ефектно. Ну а ми витратили всього кілька хвилин для отримання такого ефекту вибору часу. Варто згадати про корисною опції format, яка дозволяє змінити формат часу на більш звичний нам:
$(function(){
$(‘#time’).timeDropper({
format: ‘H:mm’
});
});
Ось, власне, і все. Як бачите робота з плагіном jQuery вибір часу дуже проста. Використовуйте jQuery timepicker у ваших проектах і вони сподобаються відвідувачам. Вихідні коди до статті ви можете завантажити за посиланням. Більше про jQuery і JavaScript ви можете дізнатися з наших уроків або курсу. Удачі!
