Clever Geek Handbook

Bootstrap-datetimepicker.js doesn't work in MVC 5

I tested several examples from http://eonasdan.github.io/bootstrap-datetimepicker/ with MVC 5. I am installing Bootstrap 3 Datetimepicker ( https://www.nuget.org/packages/Bootstrap.v3.Datetimepicker/ ).

I had to add this code to BundleConfig.cs

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/bootstrap-datetimepicker.min.js",//adding code
                      "~/Scripts/respond.js"));

this is my view code

@{
    ViewBag.Title = "Home Page";
}

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
@section Scripts {
    <script type="text/javascript">
        $(function () {
            $('#datetimepicker1').datetimepicker();
        });
    </script>
}

However loading the web page with some problem

the page should look like this:

enter image description here

but it looks like

enter image description here

I saw this forum http://forums.asp.net/t/1988610.aspx?Bootstrap+v3+DateTimePicker+in+MVC+5 and apparently there are problems with that.

Any ideas ??????

+3


source to share


3 answers


Hi I solved my problem using @ tieson-t's answer in the MVC4 Eonasdan Bootstrap 3 question Picking timing does not open the selection screen. See Featured Page.



+3


source


My working example a few hours later :) Styles section section page (I put the head in):

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

Now scripts (Placement in feet):

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
        $(function () {
            $('#datetimepicker1').datetimepicker();
        });
</script>
<script type="text/javascript" src="~/Scripts/jquery-2.2.3.min.js"></script>

      

        
        
        
      

    


<script type="text/javascript" src="~/Scripts/bootstrap-datetimepicker.js"></script>

}

Works for me

+1


source


I'm pretty sure there is no conflict between MVC 5 and Bootstrap DatePicker. Maybe the problem is with the css on your site. Have you added bootstrap css files and bootstrap-datepicker ????

0


source






More articles:


All Articles