user gravatar

ClockPicker - красивый timepicker для Bootstrap

ClockPicker - красивый timepicker для Bootstrap

ClockPicker - это удобный timepicker-плагин в стиле часов для Bootstrap и jQuery. Он может понадобиться, например, если вы хотите добавить возможность выбора даты публикации для статьи в вашей админке.

Поддерживает он многие современные браузеры, включая даже IE 9+. А также плагин поддерживает как и десктопные так и мобильные устройства. Работает ClockPicker одинаково хорошо и на тач-скрин устройствах и на обычных.

Плагин был разработан специально для Bootstrap. Поэтому для его использования нужно установить Twitter Bootstrap и jQuery.

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

Сначала скачайте сам плагин через эту ссылку и распакуйте его. А после, подключите CSS-стили от Twitter Bootstrap и ClockPicker:

<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="dist/bootstrap-clockpicker.min.css">

Затем подключите JavaScript-ы:

<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="dist/bootstrap-clockpicker.min.js"></script>

После этого, там где вам нужно вывести timepicker пропишите следующий код:

<div class="input-group clockpicker">
  <input type="text" class="form-control" value="09:30">
    <span class="input-group-addon">
    <span class="glyphicon glyphicon-time"></span>
  </span>
</div>
<!--Инлайн JS-код тут прописан только для примера-->
<script type="text/javascript">
  $('.clockpicker').clockpicker();
</script>

И на этом всё. Больше примеров можете увидеть на демо страничке.