MVC4 Eonasdan Bootstrap 3 Date Time picker doesn´t open the picker screen

I´m using a Bootstrap 3 date AND time picker linked here:

I can´t make the picking window open. When you click on the textbox, nothing happens and no messages are shown on browser Console (Chrome). So, in truth, the control is working as a simple textbox, not as a DateTime picker.

Here is my code:

_Layout file included in all views:

    <!DOCTYPE html>
<html lang="pt">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />

    <title>TestApp</title>

    <link rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
    <link rel="icon" href="~/favicon.ico" type="image/ico" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" media="screen">
    <link href="@Url.Content("~/Content/bootstrap-theme.min.css")" rel="stylesheet" media="screen">
    <link href="@Url.Content("~/Content/CustomNavBar.css")" rel="stylesheet" media="screen">
</head>

<body>

    <script src="@Url.Content("~/Scripts/jquery-2.0.3.min.js")"></script>
    <script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>

    <.... some other stuff here...>

Index.cshtml used on that page:

<link href="@Url.Content("~/Content/bootstrap-datetimepicker.min.css")" rel="stylesheet" media="screen" type="text">

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


<div class="container">
    <div class="col-md-10">
        <div class='well'>
            <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>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
    </div>
</div>

I appreciate any help to make this work...

Thanks for any help...

Your layout can be cleaned up a bit, since MVC4 no longer requires @Url.Content() for virtual paths. You probably also want to look into how the bundling system works. For certain, what you're trying to do will probably work better with sections:

_Layout.cshtml:

<!DOCTYPE html>
<html lang="pt">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>TestApp</title>
        <link rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
        <link rel="icon" href="~/favicon.ico" type="image/ico" />

        <link href="~/Content/bootstrap.css" rel="stylesheet" media="screen" />
        <link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" media="screen" />
        <link href="~/Content/CustomNavBar.css" rel="stylesheet" media="screen" />

        @RenderSection("head", required: false)
    </head>

    <body>

        @RenderBody()

        <script src="~/Scripts/jquery-2.0.3.min.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>

        @RenderSection("scripts", required: false)
    </body>
</html>

Index.cshtml:

@section head
{
    <link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen" type="text" />
}

@section scripts
{
    <script src="~/Scripts/moment.min.js"></script>
    <script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
    <script>
        $(function () {
            $('#datetimepicker1').datetimepicker();
        });
    </script>
}

<div class="container">
    <div class="col-md-10">
        <div class='well'>
            <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>

Using sections lets the view engine inject things like <script> or <link /> tags into the correct parts of the layout. Anything not in a section is injected wherever @RenderBody() occurs in the layout.

If you want a more concrete example, go straight to the source: http://weblogs.asp.net/scottgu/archive/2010/12/30/asp-net-mvc-3-layouts-and-sections-with-razor.aspx

In this two scripts of your Index.cshtml.

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

You didn't use @UrlContent(). Run your project, and look in the generated html source code, if the browser can find this js files. Or look any error in the Network tab of your browser developer tools.

来源：https://stackoverflow.com/questions/20644222/mvc4-eonasdan-bootstrap-3-date-time-picker-doesn%c2%b4t-open-the-picker-screen

标签

javascript

asp.net-mvc

asp.net-mvc-4

twitter-bootstrap

datetimepicker