bootstrap-datetimepicker.js 它在 MVC 5 中不起作用答案

【问题标题】：bootstrap-datetimepicker.js it doesn't work in MVC 5bootstrap-datetimepicker.js 它在 MVC 5 中不起作用
【发布时间】：2014-10-03 19:42:52
【问题描述】：

我一直在使用 MVC 5 测试来自 http://eonasdan.github.io/bootstrap-datetimepicker/ 的一些示例。我正在安装 Bootstrap 3 Datetimepicker(https://www.nuget.org/packages/Bootstrap.v3.Datetimepicker/)。

我必须在 BundleConfig.cs 中添加这段代码

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

这是我的观点

@{
    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>
}

但是网页加载有些问题

页面应该是这样的

但它看起来像这样

我看到了这个论坛http://forums.asp.net/t/1988610.aspx?Bootstrap+v3+DateTimePicker+in+MVC+5，显然这有问题。

有什么想法？？？？？？

【问题讨论】：

检查浏览器的调试控制台。是否记录了任何 404 或错误？
@Jasen 我检查了浏览器的调试控制台，没问题
我看到了这个问题 [MVC4 Eonasdan Bootstrap 3 Date Time picker doesn't open the picker screen][1] 和 @Tieson_T 的回答它适用于我的 [1]：stackoverflow.com/questions/20644222/…跨度>
我看到了这个问题 [MVC4 Eonasdan Bootstrap 3 Date Time picker doesn't open the picker screen][1] 并且@tieson-t 的答案对我有用[1]：stackoverflow.com/questions/20644222/…

标签： javascript asp.net-mvc twitter-bootstrap-3

【解决方案1】：

您好，我在问题MVC4 Eonasdan Bootstrap 3 Date Time picker doesn´t open the picker screen 中使用@tieson-t 的答案解决了我的问题。请参阅推荐页面。

【讨论】：

谢谢！ @Tieson 的回答解决了我的问题。问题是我混淆了加载jQuery和$(function(){...});的优先级

【解决方案2】：

几个小时后我的工作示例:) 样式部分 ov 页面（我放在前面）：

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

现在脚本（放置在脚下）：

@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>

}

为我工作

【讨论】：

【解决方案3】：

我确定 MVC 5 和 Bootstrap DatePicker 之间没有冲突。也许问题出在css
在您的网站中。是否为 bootstrap 和 bootstrap-datepicker 添加了 css 文件？？？？

【讨论】：

是的，我为 bootstrap 和 bootstrap-datepicker 添加了 css 文件 'bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/bootstrap.css", " ~/Content/bootstrap-datetimepicker.css", "~/Content/site.css"));'