Bootstrap-Datetimepicker Not working

Question

I have been looking at this for 2 days, and cant figure out what I am doing wrong.

Here is a fiddle with my project. http://jsfiddle.net/dagger2002/RR4hw/

He

Answer 1

Script include order in jsFiddle is not working, below is the modified order for workable sample. As suggested by @malkassem moment.js is required for bootstrap date picker to work.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>        
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/lang/en-gb.js"></script>                
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js"></script>`

Answer 2

Easiest way to get date and/or time picker working is by installing below package

Install-Package Bootstrap.v3.Datetimepicker.CSS 

and then reference installed files in _Layout

<!-- JS -->
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>   <!-- Bootstrap v3.3.5 -->
<script src="~/Scripts/moment.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
<script src="~/Scripts/Core.js"></script>

and then add below script to layout page before </body> tag

<script>
jQuery(document).ready(function () {

    jQuery('.datepicker').datetimepicker({ format: 'DD/MM/YYYY' });
    jQuery('.datetimepicker').datetimepicker();

});
</script>

in Razor view use as below

@Html.EditorFor(model => model.MyDate, new { htmlAttributes = new { @class = "form-control datepicker" } })
@Html.EditorFor(model => model.MyDateTime, new { htmlAttributes = new { @class = "form-control datetimepicker" } })

Answer 3

For those who are using ASP MVC's default _Layout.cs file, Remove these script imports at bottom or put it on the top.

Scripts.Render("~/bundles/jquery")
Scripts.Render("~/bundles/bootstrap")

Answer 4

There seemed to be some issues with the external resources in your jsFiddle.

I have updated jsFiddle to work. I changed the external resources and made some minor adjustments to the code.

HTML

<div class="container">
    <div class="col-sm-6" style="height:75px;">
       <div class='col-md-5'>
            <div class="form-group">
                <div>Start</div>

                <div class='input-group date' id='startDate'>
                    <input type='text' class="form-control" name="startDate" />
                    <span class="add-on">
        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
      </span>
                    </span>
                </div>
            </div>
        </div>
        <div class='col-md-5'>
            <div class="form-group">
                <div>End</div>

                <div class='input-group date' id='endDate'>
                    <input type='text' class="form-control" name="org_endDate" />
                    <span class="add-on">
        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
      </span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

JAVASCRIPT

jQuery(function () {
    jQuery('#startDate').datetimepicker({ format: 'dd/MM/yyyy hh:mm:ss' });
    jQuery('#endDate').datetimepicker({ format: 'dd/MM/yyyy hh:mm:ss' });
    jQuery("#startDate").on("dp.change",function (e) {
        jQuery('#endDate').data("DateTimePicker").setMinDate(e.date);
    });
    jQuery("#endDate").on("dp.change",function (e) {
        jQuery('#startDate').data("DateTimePicker").setMaxDate(e.date);
    });
});

UPDATE

• In your jsFiddle, you reference "bootstrap-datepicker.min.js" and not "bootstrap-datetimepicker.min.js".
• it seems that "bootstrap-datepicker.min.js" needs "moment.js" as a prerequisite. Please note that the order of includes matter.
• Finally, "en-gb.js" needs to be listed after "bootstrap-datetimepicker.min.js".

Updated jsFiddle with working solution.