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

时间:2014-10-03 19:42:52

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

我一直在使用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>
}

然而,网页加载有一些问题

页面应如下所示

enter image description here

但它看起来像这样

enter image description here

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

任何想法??????

3 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:1)

几个小时后我的工作实例:) 样式部分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>

}

为我工作

答案 2 :(得分:0)

我确定MVC 5和Bootstrap DatePicker之间没有冲突。也许问题出在css上 在您的网站。你是否为bootstrap和bootstrap-datepicker ????

添加了css文件