引导日期时间选择器未显示在 mvc 中答案

【问题标题】：Bootstrap Date Time Picker not showing up in mvc引导日期时间选择器未显示在 mvc 中
【发布时间】：2015-03-03 10:32:54
【问题描述】：

我正在尝试在 MVC 中使用 this 日期时间选择器，已经使用了几个小时但选择器屏幕没有出现，我也尝试了 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>

_布局：

<!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/

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

【问题讨论】：

在您的浏览器中打开您的开发者工具，浏览您的源代码，看看您是否可以找到您应该拥有的所有源文件。如果这证明没有结果，请检查是否有任何控制台错误。
嗨，我去检查元素 --> Debugger --> Sources --> 这里，bootstrap-datetimepicker.min.js 是灰色的，我猜是文件未加载
这可以解释，当然。您可以编辑您的问题以显示您的 _Layout 视图吗？我假设您将脚本添加到您的视图中作为演示，但无论如何我认为您没有正确使用捆绑包。
你为什么使用两个版本的jQuery？您包含 jQuery 3 次 1. @Scripts.Render("~/bundles/jquery") 。 2. 3.
如果你使用的是最新版本的nuget.org/packages/Bootstrap.v3.Datetimepicker 它使用的是最新版本的jQuery = 2.1 这个链接来自官方示例（jsfiddle.net/Eonasdan/0Ltv25o8）

标签： asp.net-mvc twitter-bootstrap bootstrap-datepicker

【解决方案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 文件是可以发送到服务器的最小化版本（变量名尽可能短，cmets 被删除，空格减少到最小）。你可能已经有类似的东西了

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

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

【讨论】：

我已经解决了这个问题，并且给了 incmets 相同的建议，我只是接受它作为答案，谢谢你的理论解释，一切顺利。