Стиль bootstrap datetimepicker не применяется правильно

У меня возникли проблемы с тем, что этот bootstrap datetimepicker работает:

http://eonasdan.github.io/bootstrap-datetimepicker/

Я сделал очень основную страницу, вот код:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;" />
<title>Test page</title>

<link rel="stylesheet" href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'; return false;">
<link rel="stylesheet" href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css'; return false;"> 
<link rel="stylesheet" src="css/bootstrap-datetimepicker.min.css">

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/moment-with-locales.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>

<script type="text/javascript">
$(document).ready(function()
{
    $('#datetimepicker1').datetimepicker();
});
</script>
</head>

<body>
<div class='col-sm-2'>
    <div class='input-group' id='datetimepicker1'>
        <input type='text' class="form-control" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
</div>

</body>
</html>

Теперь это не так, как плагин не работает, это больше похоже на то, что некоторые стили не применяются правильно. Вот картина, чтобы лучше проиллюстрировать, что я имею в виду. Слева - это то, что у меня есть, а справа - то, что я действительно хочу:

Как вы можете видеть, все выровнено слева, а не центрировано, а вещи уже. Кроме того, нет эффекта зависания, когда я запускаю указатель мыши над календарем, и текущий день не отображается должным образом. Может ли кто-нибудь сказать мне, что я делаю неправильно?

Ответы

Ответ 1

С вашего скриншота, похоже, вы не втягиваете библиотеку bootstrap-datetimepicker.css. Взгляните на консоль и убедитесь, что у вас нет ошибок, и библиотека существует в папке, которую она ищет, и имеет все необходимое содержимое.

Он не будет выглядеть ужасно без дополнительного css, потому что bootstrap делает большую часть тяжелой работы, и плагины обычно просто используют классы Bootstrap и добавляют пару своих собственных, чтобы вставить все это.

С библиотекой - Рабочая

$(function() {
  $('#datetimepicker1').datetimepicker();
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>

<div class='col-xs-4'>
  <div class='input-group' id='datetimepicker1'>
    <input type='text' class="form-control" />
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</div>

Ответ 2

Спасибо, Кайл, ты был прав, я не тянул стили CSS. Хотя это не потому, что я не включал это... скорее, это была ошибка в моем заявлении include. Это то, что у меня было:

<link rel="stylesheet" src="css/bootstrap-datetimepicker.min.css">

Я случайно ставил 'src' вместо 'href', поэтому вот что я должен был бы поставить:

<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">

Спасибо, что указали мне в правильном направлении:)

Ответ 3

У меня был такой же симптом, из-за той же проблемы стилей, которые не загружаются. В моем случае мое приложение - это приложение Rails 5, а в моем application.css файле я имел

*= require_bootstrap-datetimepicker

вместо

*= require bootstrap-datetimepicker

Сделав это исправление, исправил это для меня.