Clockpicker не отображает часы

У меня проблема с использованием устройства выбора часов ( http://weareoutman.github.io/clockpicker/).

Он ведет себя как текстовое поле и не показывает часы. Я не знаю, в чем может быть проблема, так как я включил необходимые скрипты и таблицы стилей в <head> HTML:

<link href="http://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.css" rel="stylesheet" />
<script src="http://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.js"></script>

Я также загрузил активы, поместил их в проект и импортировал их так:

<script th:src="@{/assets/js/plugins/clockpicker/clockpicker.js}" src="js/plugins/clockpicker/clockpicker.js"></script>

Это HTML-код, который отображает текстовое поле и маленький значок часов:

<div class="input-group clockpicker" style="width: 50%; float: left;">
    <input type="text" class="form-control" value="">
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-time"></span>
        </span>
</div>

И активация jquery:

$('.clockpicker').clockpicker();

Я понятия не имею, что нужно делать, поэтому любые советы приветствуются. Заранее спасибо!

РЕДАКТИРОВАТЬ: Fiddle здесь https://jsfiddle.net/q1skrndg/

Источник

2 ответа

Решение

Я решил ее, проблема была в том, что я добавил ClockPicker в качестве объекта jquery и активацию $('.clockpicker').clockpicker(); было сделано до того, как элемент был утоплен на странице, поэтому активировать его было нечего. Я думаю, что мне все еще нужно много работать с jquery, чтобы полностью понять это. Все равно спасибо всем:D

Источник

Работает нормально, я думаю, что вы пропустили добавление Jquery в заголовке

$('.clockpicker').clockpicker();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.js"></script>
<link href="https://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.css" rel="stylesheet"/>
<div class="input-group clockpicker" style="width: 50%; float: left;">
    <input type="text" class="form-control" value="">
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-time"></span>
        </span>
</div>
<script>
$('.clockpicker').clockpicker();
</script>

Источник

Bootstrap 4 2020: значок часов не отображается, но сами часы отображаются

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

Класс Bootstrap<span class="input-group-addon">, как указано в документации ClockPicker, больше не используется в Bootstrap 4.

Теперь вам нужно использовать класс Bootstrap<span class="input-group-append"> или <span class="input-group-prepend"> как вы можете найти здесь как вы можете найти здесь и интерьерspan нужен класс <span class="input-group-text">.

Значит нужно заменить:

<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>

с чем-то вроде:

<div className="input-group clockpicker">
  <input type="text" className="form-control" defaultValue="" placeholder="Now"></input>
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon1"><i class="fas fa-clock"></i></span>
  </div>
</div>

ClockPicker больше не поддерживается https://weareoutman.github.io/clockpicker/, но теперь поддерживается здесь djibe. Вы можете увидеть рабочий пример от djibe на jsfiddle здесь.

В его новой версии есть некоторые изменения стиля и обновления, которые стоит интегрировать.

Источник
Другие вопросы по тегам