Bootstrap-DatePicker不会在glyphicon上触发？-Java 学习之路

我在MVC表单中使用Eternicode的Bootstrap-Datepicker . 我正试图让弹出日历在glyphicon上触发 . 目前，当我点击输入字段而不是字形时，它将触发日历 . 当我鼠标悬停在glyphicon上时，我确实得到了手形光标，没有触发器 . 当我查看页面上的F12开发工具时，我没有看到任何错误 .

我正在使用内置的MVC捆绑，并在页面底部渲染脚本 .

查看文档似乎我所要做的就是将“date”类添加到“input-group”类 . 我也有这样的设置，但似乎没有用 .

视图：

@model CPPCustomerCall.ViewModels.CustomerCallVM

@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section Scripts {
    <script src="@Url.Content("~/Scripts/Views/CallCreate.js")"></script>

    @Scripts.Render("~/bundles/jqueryval")
}

<h2>Create</h2>

<div class="container">

    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()

        <div class="form-horizontal">
            <h4>Customer Call</h4>
            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-group">
                @Html.LabelFor(model => model.CustomerName, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.CustomerName, new { htmlAttributes = new { @class = "form-control", autofocus = "autofocus" } })
                    @Html.ValidationMessageFor(model => model.CustomerName, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.CallMessage, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.TextAreaFor(model => model.CallMessage, new { cols = 50, @rows = 5, @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.CallMessage, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.CallDate, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-3">
                    <div class="input-group date">
                        <input id="CallDate" name="CallDate" class="form-control" type="text" />
                        <div class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </div>
                    </div>
                </div>
                <div class="col-md-7">
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Create Call" class="btn btn-success" />
                </div>
            </div>
        </div>
    }

</div>

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - CPP Customer Call</title>
    @Styles.Render("~/Content/css")

</head>
<body data-ng-app="cppApp">
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("CPP Customer Call", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("Calls", "Index", "CustomerCalls")</li>
                    <li>@Html.ActionLink("Grid", "Index", "Grid")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
    </div>

    @Scripts.Render("~/bundles/tools")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

CallCreate.js文件

$(document).ready(function () {

    //Datepicker
    $('#CallDate').datepicker().on('changeDate', function (ev) {
        $('#CallDate').datepicker('hide');
    });   
});

Bundle.config

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/tools").Include(
                "~/Scripts/jquery-{version}.js"));

    bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                "~/Scripts/jquery.validate*"));

    bundles.Add(new ScriptBundle("~/bundles/jqueryinputmask").Include(
                "~/Scripts/digitalbush.maskedinput.js"));

    // Use the development version of Modernizr to develop with and learn from. Then, when you're
    // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
    bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                "~/Scripts/modernizr-*"));

    bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
              "~/Scripts/bootstrap.js",
              "~/Scripts/bootstrap-datepicker.js"));

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

Bootstrap-DatePicker不会在glyphicon上触发？

相关问题