2017-02-18 5 views
0

У меня есть следующий фрагмент кода в моем переднем конце. Я не мог заставить диспетчера времени появиться. Любая помощь, пожалуйста?Bootstrap timepicker не отображается

<!DOCTYPE HTML> 
<html> 
    <head> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.js"></script> 

    <link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.min.css" /> 

<script type="text/javascript"> 
    $(() => { 
    $('#timepicker1').timepicker(); 
    }); 
</script>  

    </head> 
    <body> 
     <div class="input-group bootstrap-timepicker timepicker"> 
      <input id="timepicker1" type="text" class="form-control input-small"> 
      <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span> 
     </div> 

    </body> 
<html> 

У меня есть все необходимые исходные файлы в моем правильном пути, как указано в приведенном выше коде. Кроме того, я не вижу ошибок в журналах браузера. Пожалуйста, помогите мне исправить это.

Спасибо всем

EDIT: Теперь я использовал ссылки прямые ТПС для всех исходных файлов, как это предусмотрено в jsfiddle.

+0

То же самое здесь? https://jsfiddle.net/eftxu3j0/ – Scovetta

+0

Не повезло :(Я пытался использовать ссылки cdn для всех исходных файлов. Тем не менее, я не мог получить значок руки, когда наводил на значок времени. – SamT

+0

Просто для будущего ссылка для любого, кто здесь смотрит, проблема заключалась в том, что я не включал rel = "stylesheet" в один из тегов css. Он отлично работал после добавления этого. – SamT

ответ

0

отн = «Таблица стилей» отсутствует в одном из тегов CSS. Это была проблема.

0

Использовать подборщик времени при загрузке. Вы должны использовать компонент datetimepicker. И использовать свойство формата, чтобы позволить только часы и минуты, чтобы быть захвачены

<!DOCTYPE HTML> 
<html> 
<head> 
    <link href="bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet"> 
    <link href="bootstrap-3.3.7/css/bootstrap-datetimepicker.min.css" rel="stylesheet"> 
    <script src="bootstrap-3.3.7/js/jquery-1.11.3.min.js"></script> 
    <script src="bootstrap-3.3.7/js/moment.js"></script> 
    <script src="bootstrap-3.3.7/js/bootstrap.js"></script> 
    <script src="bootstrap-3.3.7/js/bootstrap-datetimepicker.min.js"</script> 
    <script src="bootstrap-3.3.7/js/transition.js"></script> 
    <script src="bootstrap-3.3.7/js/collapse.js"></script> 

</head> 
<body> 
    <div class="input-group bootstrap-timepicker timepicker"> 
     <input id="timepicker1" type="text" class="form-control input-small"> 
     <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span> 
    </div> 

    <script type="text/javascript"> 
    $(function() { 
     $('#timepicker1').datetimepicker({ 
      format: 'HH:mm' 
     }); 

    }); 
    </script> 
</body> 
<html> 
+0

Спасибо за ответ. На самом деле jsfiddle, данное @Scovetta выше, работает. не поднимая timepicker в моем коде.Я не уверен, что я добавляю исходные файлы в правильном порядке. – SamT

+0

Проверьте вкладку в сети, получив 404s? – Scovetta

+0

Это сработало :). Я обнаружил, что в одном из файлов css я не включил rel = "stylesheet". Я попытался добавить это. Это сработало к счастью :). Я не знал, что этот атрибут имеет решающее значение. Еще одно обучение. Спасибо, что помогли мне с этой Сковетой и другими, кто смотрел. – SamT