【发布时间】：2016-03-05 23:12:25
【问题描述】：
在我的 ASP .NET MVC 5 应用程序中，我有一个模型类：
public class Event
{
public int Id { get; set; }
public string Name { get; set; }
[Display(Name = "Date")]
[DataType(DataType.DateTime)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd HH:mm}", ApplyFormatInEditMode = true)]
public DateTime Date { get; set; }
}
在我看来，我希望有一个日期和时间选择器，以便能够在其 Date 属性中设置事件的日期和时间。
在我看来，目前我允许使用@Html.JQueryUI().DatepickerFor(model => model.Date) 编辑Date，但是这只为我提供了日期选择器，没有小时/分钟可供选择。
我浏览了论坛并找到了this 的帖子，我很想使用bootstrap-datetimepicker，但我无法正确安装和使用它。
我安装了 NuGet 包 Bootstrap.DateTimePicker 并尝试将 here 中的示例代码直接放入我的视图中：
<div class="well">
<div id="datetimepicker1" class="input-append date">
<input data-format="dd/MM/yyyy hh:mm:ss" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker1').datetimepicker({
language: 'pt-BR'
});
});
</script>
但它只显示一个空的空白文本框，日期/日期时间选择器根本不出现。我什至不知道如何将这个潜在的 DateTimePicker 绑定到我模型的属性 Date。
我想我忘记了什么，也许在某处包括一些脚本？ 我浏览了manual 和网络，但我无法让它工作......
在浏览器控制台中我有：
ReferenceError: jQuery 未定义 jquery-ui-1.11.4.js:14 jquery-ui-1.11.4.js:6 ReferenceError：$ 未定义错误：Bootstrap 的 JavaScript 需要 jQuery
编辑： 我还附上了我的 _Layout.cshtml 文件的内容：
<!DOCTYPE html>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="/Content/jquery-ui.css"/>
<script src="/Scripts/jquery-ui-1.11.4.js"></script>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - NOMU</title>
@Styles.Render("~/Content/css")
@*style for vertical tabs*@
<style>
.ui-tabs-vertical .ui-tabs-nav {
padding: .2em .1em .2em .2em;
float: left;
width: 12em;
}
.ui-tabs-vertical .ui-tabs-nav li {
clear: left;
width: 100%;
border-bottom-width: 1px !important;
border-right-width: 0 !important;
margin: 0 -1px .2em 0;
}
.ui-tabs-vertical .ui-tabs-nav li a {
display: block;
}
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
padding-bottom: 0;
padding-right: .1em;
border-right-width: 1px;
border-right-width: 1px;
}
.ui-tabs-vertical .ui-tabs-panel {
padding: 1em;
float: right;
width: 40em;
}
</style>
@section Scripts {
@Scripts.Render("~/bundles/modernizr")
<script src="~/Scripts/globalize/globalize.js"></script>
<script src="~/Scripts/globalize/cultures/globalize.culture.@(System.Threading.Thread.CurrentThread.CurrentCulture.Name).js"></script>
<script>
$.validator.methods.number = function(value, element) {
return this.optional(element) ||
!isNaN(Globalize.parseFloat(value));
}
$(document).ready(function() {
Globalize.culture('@(System.Threading.Thread.CurrentThread.CurrentCulture.Name)');
});
</script>
<script>
jQuery.extend(jQuery.validator.methods, {
range: function(value, element, param) {
//Use the Globalization plugin to parse the value
var val = Globalize.parseFloat(value);
return this.optional(element) || (
val >= param[0] && val <= param[1]);
}
});
$.validator.methods.date = function(value, element) {
return this.optional(element) ||
Globalize.parseDate(value) ||
Globalize.parseDate(value, "yyyy-MM-dd");
}
</script>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript"
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
</script>
<script type="text/javascript">
$('#datetimepicker').datetimepicker({
format: 'dd/MM/yyyy hh:mm:ss',
language: 'pt-BR'
});
</script>
}
</head>
<body>
<div class="navbar navbar-inverse 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("HOME", "Index", "Home", new {area = ""}, new {@class = "navbar-brand"})
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Members", "Index", "Members")</li>
<li>@Html.ActionLink("Addresses", "Index", "Addresses")</li>
<li>@Html.ActionLink("Departments", "Index", "Departments")</li>
<li>@Html.ActionLink("Events", "Index", "Events")</li>
<li>@Html.ActionLink("Payments", "Index", "Payments")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr/>
<footer>
<p>© @DateTime.Now.Year - Site Title</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/base/css")
@RenderSection("scripts", required: false)
</body>
</html>
编辑 2015-12-05：
感谢您的帮助，但我仍然找不到解决方案...我将尝试提供尽可能多的详细信息。
当然，我将其集成到我的解决方案中很糟糕，就好像我使用 HTML 代码创建示例 HTML 文件一样，因为它下面提出的@coderealm 当然可以。
这是该视图生成的 HTML 代码：
<!DOCTYPE html>
<html>
<head>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/jquery-ui-1.11.4.js"></script>
<script src="/Scripts/jquery-ui.unobtrusive-3.0.0.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<style type="text/css">
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
</style>
<link rel="stylesheet" href="/Content/jquery-ui.css"/>
<script src="/Scripts/jquery-ui-1.11.4.js"></script>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create - Event</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<style>
.ui-tabs-vertical .ui-tabs-nav {
padding: .2em .1em .2em .2em;
float: left;
width: 12em;
}
.ui-tabs-vertical .ui-tabs-nav li {
clear: left;
width: 100%;
border-bottom-width: 1px !important;
border-right-width: 0 !important;
margin: 0 -1px .2em 0;
}
.ui-tabs-vertical .ui-tabs-nav li a {
display: block;
}
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
padding-bottom: 0;
padding-right: .1em;
border-right-width: 1px;
border-right-width: 1px;
}
.ui-tabs-vertical .ui-tabs-panel {
padding: 1em;
float: right;
width: 40em;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse 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>
<a class="navbar-brand" href="/">HOME</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/Members">Members</a></li>
<li><a href="/Addresses">Addresses</a></li>
<li><a href="/Departments">Departments</a></li>
<li><a href="/Events">Events</a></li>
<li><a href="/Payments">Payments</a></li>
<li><a href="/Messages/Create">Send message</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Administration <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-header">Users & Roles</li>
<li><a href="/Account/Register">Create new user</a></li>
<li><a href="/Roles">Manage roles</a></li>
</ul>
</li>
</ul>
<style type="text/css">
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
</style>
<form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="esfmyOwwGOynXzXzmRDd8FnKUZX5pNVDXdpcZwtBEq4y5j1d9fPS-0ce2pemBsSi3Yp4l8NOWs5hXvgxQpQP3t-n-9V3P1SuvEurk2RCd9WJO9gilnBwQqgSll4F2WsGHR3NMNKFkrdZD0uy8lJQdw2" /> <ul class="nav navbar-nav navbar-right">
<li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Hello user@gmail.com <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-header">Account</li>
<li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
<li><a href="/Manage">Manage</a></li>
</ul>
</li>
</ul>
</form>
</div>
</div>
</div>
<div class="container body-content">
<h2>Create</h2>
<form action="/Events/Create" method="post"><input name="__RequestVerificationToken" type="hidden" value="ChQ9Bowi5lfzRdqywpBOd6DW8xX7EDm19zq0IL3f_MqTAjOXPlL6fiK-pLbdDeonHzsCQfWOEQ7lU3j-t1lCBpqGL7rOu1vlapqJpM2zUbcHGicp4QpaIvxrQpOihUlVy9qypWEHhuRHEHJ-Q--rkw2" /> <div class="form-horizontal">
<h4>Event</h4>
<hr />
<div class="form-group">
<label class="control-label col-md-2" for="Name">Name</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="Name" name="Name" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="Name" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Date">Date</label>
<div class="col-md-10">
<input data-jqui-dpicker-dateformat="yy-mm-dd" data-jqui-type="datepicker" data-val="true" data-val-date="The field Date must be a date." id="Date" name="Date" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="Date" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Place">Place</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="Place" name="Place" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="Place" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Mandatory">Mandatory</label>
<div class="col-md-10">
<div class="checkbox">
<input class="check-box" id="Mandatory" name="Mandatory" type="checkbox" value="true" /><input name="Mandatory" type="hidden" value="false" />
<span class="field-validation-valid text-danger" data-valmsg-for="Mandatory" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
</form>
<div>
<a href="/Events">Back to List</a>
</div>
<hr/>
<footer>
<p>© 2015 - Title</p>
</footer>
</div>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Firefox","requestId":"841bbc2758464834b8d3ce225ba16e58"}
</script>
<script type="text/javascript" src="http://localhost:2142/e8ea71ac5d3f49bd91e335052d0353be/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
Date 的我的字段当前使用 jquery DatePicker（在视图中我只是使用 @Html.JQueryUI().DatepickerFor(model => model.Date) 来使用它）并且它可以很好地显示简单的 jquery 日历，但正如我所提到的，它不可能选择小时。所以我决定使用上面提到的bootstrap-datetimepicker，所以我从 NuGet 安装了它：
- 根据@coderealm 的建议，我将示例代码的
<head>部分放入我的_Layout.cshtml文件中，以便在所有视图中通用。我把它放在<head>部分的结尾之前：here（对不起，PasteBin，这条消息已经太长了）。
当我重新加载我的视图时，在将这段代码粘贴到那里之后，它会改变它的外观（实际上，只需将 <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> 粘贴到 _Layout.csthml 文件中就足够了）：
如您所见，文本字段变小了，标题不再是粗体。顺便说一句，我的旧 jquery Datepicker 目前仍然可以正常工作，但我认为这些文本框的视图和通常的布局都发生了变化是不行的。上述视图生成的 HTML 现在已更改为以下视图：
<!DOCTYPE html>
<html>
<head>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/jquery-ui-1.11.4.js"></script>
<script src="/Scripts/jquery-ui.unobtrusive-3.0.0.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<style type="text/css">
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
</style>
<link rel="stylesheet" href="/Content/jquery-ui.css"/>
<script src="/Scripts/jquery-ui-1.11.4.js"></script>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create - Event</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<style>
.ui-tabs-vertical .ui-tabs-nav {
padding: .2em .1em .2em .2em;
float: left;
width: 12em;
}
.ui-tabs-vertical .ui-tabs-nav li {
clear: left;
width: 100%;
border-bottom-width: 1px !important;
border-right-width: 0 !important;
margin: 0 -1px .2em 0;
}
.ui-tabs-vertical .ui-tabs-nav li a {
display: block;
}
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
padding-bottom: 0;
padding-right: .1em;
border-right-width: 1px;
border-right-width: 1px;
}
.ui-tabs-vertical .ui-tabs-panel {
padding: 1em;
float: right;
width: 40em;
}
</style>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
</head>
<body>
<div class="navbar navbar-inverse 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>
<a class="navbar-brand" href="/">HOME</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/Members">Members</a></li>
<li><a href="/Addresses">Addresses</a></li>
<li><a href="/Departments">Departments</a></li>
<li><a href="/Events">Events</a></li>
<li><a href="/Payments">Payments</a></li>
<li><a href="/Messages/Create">Send message</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Administration <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-header">Users & Roles</li>
<li><a href="/Account/Register">Create new user</a></li>
<li><a href="/Roles">Manage roles</a></li>
</ul>
</li>
</ul>
<style type="text/css">
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
</style>
<form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="DuIycgdv9rnUap62YqrY4A0imdnNK99uk3sK_LNm8OFv2fj3PKnhDYAp1gr87Cke0r-EDSb2cZGhCoH3x8kcu0bU7GqCQQlHEvntgaRNsqU8rpRcJHzVY40LTk-S56i3OfWeJQGqsc7azegYEodNmw2" /> <ul class="nav navbar-nav navbar-right">
<li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Hello test@gmail.com <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-header">Account</li>
<li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
<li><a href="/Manage">Manage</a></li>
</ul>
</li>
</ul>
</form>
</div>
</div>
</div>
<div class="container body-content">
<h2>Create</h2>
<form action="/Events/Create" method="post"><input name="__RequestVerificationToken" type="hidden" value="a-m23Z2lGhcnMvAvJit74BPW2oqJFPsP9qQ4KjUASZobUsiYp5Q48K-rCR7ZjGm4GPD0dihBjBRuMmAVUiIM9qOjojMLFIQ2_X2i0EtgvGUY3OKVJ9BB_wzb8tcTTiN4wxURNAK1M2VDPKjLkjEDig2" /> <div class="form-horizontal">
<h4>Event</h4>
<hr />
<div class="form-group">
<label class="control-label col-md-2" for="Name">Name</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="Name" name="Name" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="Name" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Date">Date</label>
<div class="col-md-10">
<input data-jqui-dpicker-dateformat="yy-mm-dd" data-jqui-type="datepicker" data-val="true" data-val-date="The field Date must be a date." id="Date" name="Date" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="Date" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Place">Place</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="Place" name="Place" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="Place" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Mandatory">Mandatory</label>
<div class="col-md-10">
<div class="checkbox">
<input class="check-box" id="Mandatory" name="Mandatory" type="checkbox" value="true" /><input name="Mandatory" type="hidden" value="false" />
<span class="field-validation-valid text-danger" data-valmsg-for="Mandatory" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
</form>
<div>
<a href="/Events">Back to List</a>
</div>
<hr/>
<footer>
<p>© 2015 - Title</p>
</footer>
</div>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Firefox","requestId":"3ca3ab4389224867b6caa3f9435eeb1d"}
</script>
<script type="text/javascript" src="http://localhost:2142/e8ea71ac5d3f49bd91e335052d0353be/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
- 如果我现在将@coderealm 提供的示例HTML 代码的
<body>部分放入我的Create.cshtml视图文件中（我将它放在最后一个添加ActionLink的div元素之前返回到同一控制器内的Index.cshtml）：here
它添加了新的 DateTimePicker，但是在选择了日期和时间之后它就卡在了这个状态：
并且我无法关闭此 DatetimePicker，当我单击某个位置时它不会消失。这次生成的 HTML 代码是（对不起，我需要把它放在 PasteBin 上，因为超出了消息的长度）：here。
我希望现在有人能够帮助我，因为它已经让我发疯了......我最初不是网络开发人员，所以可能我在我的视图中搞砸了一些东西，也许我没有正确加载脚本或其他东西。 ..
再次感谢您的帮助！
【问题讨论】：
-
确保您正在利用浏览器的开发者控制台，这可能会输出有助于故障排除的错误。
-
在开发人员控制台中打开此视图时出现的错误：ReferenceError: jQuery is not defined
jquery-ui-1.11.4.js:14 jquery-ui-1.11.4。 js:6 ReferenceError: $ is not defined Error: Bootstrap's JavaScript requires jQuery -
@ikS11 显示你的脚本部分
-
@ikS11 好的，这个错误是不言自明的。当 bootstrap.js 脚本加载时，jquery.js 不可用。如果没有先加载 jquery，可能会发生这种情况。
-
这是我在 _Layout.cshtml 中的脚本部分 -> pastebin.com/PvG94B1w
标签： jquery asp.net asp.net-mvc jquery-ui datetimepicker