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

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

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

Рекомендуемое чтение: типы ввода в HTML5-формах: дата, цвет и диапазон

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

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

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

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

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

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

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

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

Увидеть перо timedropper.jsà £ Â,Âμà £ ƒ³à £ ÃÂ-à £ à« по CodeSample (@webhacck) на CodePen,

Рекомендуемое чтение: Практическое руководство. Настройка и тематика jQuery UI Datepicker

            <script async src="https://triu.ru/wp-content/litespeed/localres/aHR0cHM6Ly9wbGF0Zm9ybS50d2l0dGVyLmNvbS93aWRnZXRzLmpz" charset="utf-8"></script>