Bootstrap datetimepicker样式无法正常显示

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 ?

Answer 1

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.

Answer 2

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