Bootstrap datetimepicker style not displaying properly

Question

I'm trying to use bootstrap-datetimepicker but I can't make it show properly. I followed the installation part of the tutorial.

Screenshot

My result :

The example from the doc :

HTML

<div class="form-group">
    <div class="input-group date">
        <label class="input-group-addon" for="add-event-start"><span class=
        "glyphicon glyphicon-calendar"></span></label><input class=
        "form-control" id="add-event-start" name="start" type="text">
    </div>
</div>

Javascript

$('#add-event-start').datetimepicker({
    allowInputToggle: true,
    locale: 'fr',
    icons: {
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-arrow-up",
        down: "fa fa-arrow-down",
    },
});

Head

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/fullcalendar.min.css">
<link rel="stylehseet" href="css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>

Body

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/vendor/validator.min.js"></script>
<script src="js/vendor/moment/moment.min.js"></script>
<script src="js/vendor/moment/fr.min.js"></script>
<script src="js/vendor/fullcalendar/fullcalendar.min.js"></script>
<script src="js/vendor/fullcalendar/fr.min.js"></script>
<script src="js/vendor/typeahead.bundle.min.js"></script>
<script src="js/vendor/bootstrap-datetimepicker.min.js"></script>

I tried to remove some includes to prevent conflicts but i had the same result. Can someone tell what I am doing wrong ?

Can you create a Fiddle or such to help us identify the problem faster. — Nikhil Nanjappa
– Nikhil Nanjappa, Commented Mar 11, 2016 at 14:06
The one from the doc : eonasdan.github.io/bootstrap-datetimepicker/Installing — auk
– auk, Commented Mar 11, 2016 at 14:10
I don't exactly know what's wrong, because you don't explain what's supposed to be seen, but it seems to me everything is aligned to the left? — DigiLive
– DigiLive, Commented Mar 11, 2016 at 14:11

DigiLive · Accepted Answer · 2016-03-11 14:21:49Z

3

I get the same results as your picture when I neglect to include or disable the Bootstrap Datepicker CSS stylesheet. (Step 6 of the guide):

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

In your sample code the tag seems to be present in your header, but you must make sure it's loaded as well. Maybe the path or the file itself is wrong.

answered Mar 11, 2016 at 14:21

DigiLive

1,1131 gold badge12 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

auk Over a year ago

It's well included, I checked ... I also tried with the style from the doc !

DigiLive Over a year ago

It's almost impossible to get exactly the same results by other faults than this one. If you're really sure the right file is included and loaded properly, I wonder if it has the correct content.

John Morsley · Accepted Answer · 2016-03-18 12:07:53Z

0

I get exactly the same thing! :(

However, if you use the versions of bootstrap-datetimepicker.css and bootstrap-datetimepicker.js from the demo site it works.

The versions on the demo site are 4.15.35 and not the latest 4.17.37 available from GitHub...

answered Mar 18, 2016 at 12:07

John Morsley

11 bronze badge

Collectives™ on Stack Overflow

Bootstrap datetimepicker style not displaying properly

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related