Search code examples
csstwitter-bootstrapdatetimepickereonasdan-datetimepicker

How to fix weird styling using Bootstrap 3 Datetimepicker

I have an issue with the Bootstrap 3 Datetimepicker as shown in the picture below. I've done everything in the documentation and the console is blank without errors.

enter image description here

enter image description here

I've included the following assets:

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

And my HTML looks like this:

<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 is included in the header. I even checked if my custom CSS is interfering with Datetimepicker, but I removed all my custom CSS to check if that's the case. I had the same problem without my custom styling. I'm using Bootstrap 3.

What could be the case?

Solution

  • Check the Installation Guides section of the docs:

    Include necessary scripts and styles:

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

    Since you are using Bootstrap style (Bootstrap is included in the header.) you have to use bootstrap-datetimepicker.css instead of bootstrap-datetimepicker-standalone.css.

    Here a working snippet (using resources from 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>