CODEWITHSUNDEEP
javascriptcsstwitter-bootstrapbootstrap-datetimepicker
auk
auk

Reputation: 181

Bootstrap datetimepicker style not displaying properly

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 :

style not applied

The example from the doc :

enter image description here

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 ?

Upvotes: 1

Views: 5520

Answers (2)

John Morsley
John Morsley

Reputation: 1

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

Upvotes: 0

DigiLive
DigiLive

Reputation: 1103

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.

Upvotes: 3

Related Questions