Домашняя » Инструментарий » Пользовательские поля ввода времени с помощью jQuery Timedropper

    Пользовательские поля ввода времени с помощью jQuery Timedropper

    Некоторые веб-формы требуют основанные на дате входы и плагин выбора даты может помочь с этим. Но что насчет входы времени?

    С бесплатным плагином jQuery Timedropper, можете добавить Выбор времени для назначения встреч, планирования телефонных звонков или почти всего, что вам нужно.

    Это невероятно просто и ты нужна только библиотека jQuery для начала. После установки этой библиотеки вы можете добавить файлы Timedropper JS / CSS и запустить ее. это оно!

    Каждое поле ввода должно быть нацелено на селектор jQuery который затем добавляет поле ввода Timedropper. это есть варианты Вы можете добавить дополнительные (дополнительные) функции:

    • Автопереключение - автоматически меняет час / минуту при наведении
    • Меридианы - установить 12-часовые часы вместо 24-часовых
    • Формат - устанавливает способ отображения часов и минут (стиль по умолчанию 1:22 pm)
    • Колесико мыши - позволяет изменять время на основе прокрутки колеса
    • Init_animation - включает эффекты затухания анимации
    • setCurrentTime - автоматически добавляет текущее время к значению поля

    Если ты еще более смелый, ты можешь изменить стиль используя несколько предварительно упакованных тем или даже создайте свою собственную с нуля.

    В море плагинов jQuery Timedropper - это колени пчелы. Это реально предлагает уникальный интерфейс для любого приложения выбрать время независимо от устройства.

    Естественно, это мобильный реагирующих, так что это работает на смартфонах и планшетах тоже. Тем не менее, я не люблю отсутствие поддержки num pad. Это кажется очевидным способом ввода времени, поэтому без этой функции он может чувствовать себя ограниченным.

    Тем не менее, для уникальный интерфейс и простая настройка, Я рекомендую Timedropper всем, кто хочет дать ему шанс.

    Ты можешь найти весь исходный код бесплатно на GitHub, и вы найдете невероятно простую демонстрацию в этой ручке, встроенную ниже.

    Если у вас есть другие мысли или предложения, не стесняйтесь поделиться с разработчиком в Твиттере @felice_gattuso.