Bootstrap 日期时间选择器未显示在 mvc 中

Question

我正在尝试使用 this Date time Picker in MVC, its been hours but picker screen is not showing up, i also tried this

BundelConfig.cs

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                                    "~/Scripts/jquery-{version}.js",
                                    "~/Scripts/moment.js",
                                    "~/Scripts/bootstrap.js",
                                    "~/Scripts/bootstrap-datetimepicker.min.js"              
                                    ));

// other bundles here

bundles.Add(new StyleBundle("~/Content/css").Include(
                                   "~/Content/site.css",
                                   "~/Content/bootstrap.css",
                                   "~/Content/bootstrap-datetimepicker.min.css"   
                ));

// other bundles here

我的观点：

<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/moment.js"></script>
<script src="~/Scripts/bootstrap.js"></script>    
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>

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



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

_Layout:

<!DOCTYPE html>
<html>
<head>
 @Scripts.Render("~/bundles/modernizr")
 @Styles.Render("~/css/boostrap.css")

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
</head>

<body>

<div>

// here other divs

   @RenderBody()


</div>


<script src="js/jquery.js"></script>
<script src="js/boostrap.min.js"></script>

@section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
    }
 @Scripts.Render("~/bundles/jquery")
 @RenderSection("scripts", required: false)

</body>
</html>

预期输出

http://jsfiddle.net/RR4hw/7/

我无法弄清楚我做错了什么？，任何帮助将不胜感激。

Answer 1

您多次包含 jQuery。您的捆绑包已包含它，因此您可以在布局中删除此行：

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

以及您认为的这些行：

<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/moment.js"></script>
<script src="~/Scripts/bootstrap.js"></script>    
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>

您布局中的这一行

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

这一切都是为您完成的，因为您已将这些脚本添加到该包中。

多次包含同一个脚本会对性能产生负面影响，但通常不会阻止代码运行。但是，在这种情况下，您包含的 jQuery 的不同版本都是不同的版本。我会检查您的 Scripts 文件夹中的内容，看看它是否是最新的。

顺便说一句，将 styles（例如 CSS）放在页面顶部和 scripts 在底部，因为这样浏览器将正确地加载带有样式的页面，并且不会因为尝试加载脚本中途而减慢速度（如果脚本有问题，页面仍会加载）。

最后，您似乎对 .min.js 和 .js 之间的区别有点困惑（我是根据您有时使用 min 版本，有时不知道；如果您已经知道这一切，请原谅！）。 .min.js 文件是可以发送到服务器的最小化版本（变量名称尽可能短，注释已删除，空格减少到最少）。你可能已经有了这样的东西

#if DEBUG
    BundleTable.EnableOptimizations = false;
#else
    // note: overrides compilation debug="true" in Web.config
    BundleTable.EnableOptimizations = true;
#endif

在您的 Bundle.Config 文件中。如果没有，添加起来很方便，因为这意味着发布版本具有最佳性能（.min.js 文件），但调试版本更易于阅读（正常 .js 文件）以帮助您调试它。

Bootstrap 日期时间选择器未显示在 mvc 中

Bootstrap Date Time Picker not showing up in mvc

asp.net-mvc

twitter-bootstrap

bootstrap-datepicker