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

前端 未结 2 839
鱼传尺愫
鱼传尺愫 2021-01-23 22:44

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

DateTime Picker for Bootstrap 3

I can´t make the picking window open. When you click on the textbox, n

相关标签:
2条回答
  • 2021-01-23 22:59

    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

    0 讨论(0)
  • 2021-01-23 23:08

    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.

    0 讨论(0)
提交回复
热议问题