I am trying to use BootStrap DateTimePicker and it is not displaying properly on the screen. My HTML looks like below.

<div class='input-group date' id='startDate'>
        <input type='text' class="form-control" name="startDate" />
        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</div>

And the Javascript is like below.

$(document).ready(function () {
            // DateTime picker for Dates
            $("#startDate").datetimepicker();
});

And the order in which I am loading my javascript and css files is as below.

<link href="/Content/css/datepicker.css" rel="stylesheet"/>
<link href="/Content/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<link href="/Content/css/bootstrap.css" rel="stylesheet"/>

<script src="/Scripts/jquery-2.1.0.js"></script>
<script src="/Scripts/jquery-ui-1.10.0.custom.js"></script>
<script src="/Scripts/bootstrap-datepicker.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/moment.js"></script>
<script src="/Scripts/bootstrap-datetimepicker.js"></script>

With the above set up, datetime picker is displaying as below without any proper css. The arrow buttons to change the month are not displayed correctly.

I tried changing the order, but still displaying the same. Can someone help me with what i am missing?

I am trying to use BootStrap DateTimePicker and it is not displaying properly on the screen. My HTML looks like below.

<div class='input-group date' id='startDate'>
        <input type='text' class="form-control" name="startDate" />
        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</div>

And the Javascript is like below.

$(document).ready(function () {
            // DateTime picker for Dates
            $("#startDate").datetimepicker();
});

And the order in which I am loading my javascript and css files is as below.

<link href="/Content/css/datepicker.css" rel="stylesheet"/>
<link href="/Content/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<link href="/Content/css/bootstrap.css" rel="stylesheet"/>

<script src="/Scripts/jquery-2.1.0.js"></script>
<script src="/Scripts/jquery-ui-1.10.0.custom.js"></script>
<script src="/Scripts/bootstrap-datepicker.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/moment.js"></script>
<script src="/Scripts/bootstrap-datetimepicker.js"></script>

With the above set up, datetime picker is displaying as below without any proper css. The arrow buttons to change the month are not displayed correctly.

I tried changing the order, but still displaying the same. Can someone help me with what i am missing?

• javascript
• jquery
• twitter-bootstrap

• why to use both <script src="/Scripts/bootstrap-datepicker.js"></script> and <script src="/Scripts/bootstrap-datetimepicker.js"></script> ? can't you just use the datepicker script? – ymz Commented Nov 24, 2014 at 21:53

1 Answer 1

Ok, check this fiddle:

http://jsfiddle/8hmcfmLh/1/

you don't need jquery-ui or bootstrap-datepicker, just bootstrap-datetimepicker and moment.js

<div class="input-group date" id="startDate">
        <input type="text" class="form-control" name="startDate" />
    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>

$(document).ready(function () {
    // DateTime picker for Dates
    $("#startDate").datetimepicker();
});