我在MVC表单中使用Eternicode的Bootstrap-Datepicker。我正试图让弹出日历在glyphicon上触发。目前,当我点击输入字段而不是字形时,它将触发日历。当我鼠标悬停在glyphicon上时,我确实得到了手形光标,没有触发器。当我查看页面上的F12开发工具时,我没有看到任何错误。
我正在使用内置的MVC捆绑,并在页面底部渲染脚本。
查看文档看起来好像我要做的就是将“date”类添加到“input-group”类。我也有这样的设置,但似乎没有用。
查看:
assert(MAX_PATH > wsclen(WorkingDirectory) + wsclen(File) + wsclen(L".bz2"))
_Layout.cshtml
@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>
CallCreate.js文件
<!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>
Bundle.config
$(document).ready(function () {
//Datepicker
$('#CallDate').datepicker().on('changeDate', function (ev) {
$('#CallDate').datepicker('hide');
});
});