javascript - bootstrap-datetimepicker.js it doesn't work in MVC 5 - Stack Overflow

admin管理员组

文章数量:1327679

I have been testing some examples from this / with MVC 5. I'm install Bootstrap 3 Datetimepicker(.v3.Datetimepicker/).

I had to add this code in BundleConfig.cs

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

this is the code of my view

@{
    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 the web page load with some problem

the page should look like this

but it looks like this

I was seeing this forum .aspx?Bootstrap+v3+DateTimePicker+in+MVC+5 and apparently there are problems with this.

Any ideas??????

I have been testing some examples from this http://eonasdan.github.io/bootstrap-datetimepicker/ with MVC 5. I'm install Bootstrap 3 Datetimepicker(https://www.nuget/packages/Bootstrap.v3.Datetimepicker/).

I had to add this code in BundleConfig.cs

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

this is the code of my view

@{
    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 the web page load with some problem

the page should look like this

but it looks like this

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

Any ideas??????

• javascript
• asp-mvc
• twitter-bootstrap-3

Share Improve this question Follow edited Oct 6, 2014 at 8:54 creimers 5,30344 gold badges3636 silver badges5656 bronze badges asked Oct 3, 2014 at 19:42 CyberguilleCyberguille 1,60233 gold badges3131 silver badges5959 bronze badges 4

• Check your browser's debug console. Are there any 404s or errors logged? – Jasen Commented Oct 3, 2014 at 21:07
• @Jasen I check my browser's debug console and all right – Cyberguille Commented Oct 4, 2014 at 15:06
• I see this question [MVC4 Eonasdan Bootstrap 3 Date Time picker doesn´t open the picker screen][1] and the answer of @Tieson_T it works for my [1]: stackoverflow./questions/20644222/… – Cyberguille Commented Oct 4, 2014 at 15:14
• I see this question [MVC4 Eonasdan Bootstrap 3 Date Time picker doesn´t open the picker screen][1] and the answer of @tieson-t it works for me [1]: stackoverflow./questions/20644222/… – Cyberguille Commented Oct 4, 2014 at 15:24

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Hi I solved my problem using the answer of @tieson-t in the question MVC4 Eonasdan Bootstrap 3 Date Time picker doesn´t open the picker screen. See remended page.

My working example after some hours :) Style section ov page (I'm placing at head) :

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

Now scripts (Placing at foot):

@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

I sure there is not conflict between MVC 5 and Bootstrap DatePicker. Maybe the problem is with a css
in your site. Did you added the css files for bootstrap and bootstrap-datepicker????

本文标签： javascriptbootstrapdatetimepickerjs it doesn39t work in MVC 5Stack Overflow