jQueryUI TimePicker widget (c) Каминский Илья.

jQueryUI TimePicker widget виджет для выбора времени.

Виджет предоставляет пользователю осуществлять ввод времени в поля форм "в два щелчка" без необходимости переключения к клавиатуре.

Виджет ориентирован на сенсорные экраны. Но и обычные экраны также поддержаны: пользователь может легко выбирать между клавиатурным вводом или использованием виджета.

Виджет аналогичен популярному jQueryUI Datepicker Widget, но предназначен для ввода полей времени.

Загрузить плагин

Найти все сеансы на кинофильм "Малефисента" на сегодня:

Найти в системе все файлы измененные:

Протестировать работу плагина на странице, без адаптивного дизайна.


В чем преимущества?

  • Интуитивно понятный интерфейс.
  • Удобный и быстрый ввод времени "в два щелчка", без необходимости использования клавиатуры.
  • Умное позиционирование на экране, не заслоняющее поле ввода.
  • Может работать совместно с jQueryUI Datepicker.
  • Поддержка сенсорных экранов.
  • Совместим с браузерами, начиная с IE6 и FF3.

Как использовать?

Получить код проекта на GitHub'е (каталог dist).

Подключить плагин к вашим страницам [1]:
<link rel="stylesheet" href="timepicker-ui.css" type="text/css"/>
<script src="timepicker-ui.min.js"></script>

Связать виджет с полями вашей формы[2]:
$('input.time').timePicker();


1 Необходимо указать правильные пути к изображениям в файле стилей timepicker-ui.css.

2 При вызове допустимы следующие опции:

  • touchscreen - виджет работает на сенсорном дисплее (по умолчанию, используется автоопределение).
  • compatible - включить ли режим совместимости со старыми браузерами (по умолчанию true)?
  • defaultHour, defaultMin - время "по умолчанию" для элементов, в которых время не задано (часы и минуты соответственно). PM - послеполуденное время (+12 часов).
  • onOpened - функция, вызываемая когда элемент появляется на экране.
  • onClosed - функция, вызываемая когда элемент скрывается с экрана.
Пример:
$('.time').timePicker({compatible: !(Modernizr.backgroundsize && Modernizr.borderradius)});