Как исправить странный стиль с помощью Bootstrap 3 Datetimepicker

У меня возникла проблема с Bootstrap 3 Datetimepicker, как показано на рисунке ниже. Сделал все как в документации и консоль пустая без ошибок.

введите здесь описание изображения

введите здесь описание изображения

Я включил следующие активы:

<link href='/assets/plugins/datepicker/css/bootstrap-datetimepicker-standalone.css' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/nb.js"></script>
<script src="/assets/plugins/datepicker/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#event_title').datetimepicker({
            locale: 'nb'
        });
    });
</script>

И мой HTML выглядит так:

<div class="form-group form-group-relative">
  <label>Tittel på arrangement</label>
  <div style="position: relative;">
    <input type="text" class="form-control input-lg" id="event_title" name="event_title" placeholder="Tittel på arrangement">
  </div>
</div>

Bootstrap включен в шапку. Я даже проверил, не мешает ли мой пользовательский CSS Datetimepicker, но я удалил весь свой пользовательский CSS, чтобы проверить, так ли это. У меня была такая же проблема без моего собственного стиля. Я использую Bootstrap 3.

В чем может быть дело?


css datetimepicker twitter-bootstrap eonasdan-datetimepicker
person kanarifugl    schedule 12.08.2017    source источник
comment
Попробуйте включить bootstrap-theme.css   -  person Mayank Vadiya    schedule 12.08.2017

Ответы (1)


arrow_upward
1
arrow_downward

Ознакомьтесь с разделом документации Руководства по установке:

Включите необходимые скрипты и стили:

<head>
  <!-- ... -->
  <script type="text/javascript" src="/bower_components/jquery/jquery.min.js"></script>
  <script type="text/javascript" src="/bower_components/moment/min/moment.min.js"></script>
  <script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
  <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="/bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />
</head>

Поскольку вы используете стиль Bootstrap (Bootstrap включен в заголовок), вы должны использовать bootstrap-datetimepicker.css вместо bootstrap-datetimepicker-standalone.css.

Вот рабочий фрагмент (с использованием ресурсов из CDN):

$('#event_title').datetimepicker({
    locale: 'nb'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/nb.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>

<div class="form-group form-group-relative">
  <label>Tittel på arrangement</label>
  <div style="position: relative;">
    <input type="text" class="form-control input-lg" id="event_title" name="event_title" placeholder="Tittel på arrangement">
  </div>
</div>

person VincenzoC    schedule 12.08.2017