ASP .NET MVC 5 日期和时间选择器
Posted
技术标签:
【中文标题】ASP .NET MVC 5 日期和时间选择器【英文标题】：ASP .NET MVC 5 Date and time picker 【发布时间】：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 【参考方案1】：我终于找到了解决办法。
关于我最初的问题，我仍然不知道发生了什么，它不起作用，但是我找到了另一种方法:)。
我决定使用this JQueryUI DateTimePicker addon。
你需要做的就是让它工作（在我的情况下，我的 Date 字段）：
-
你需要在你的项目中安装 jQuery 和 jQueryUI（如果你已经在使用 jQueryUI.Datepicker 你已经有了这些）
现在是时候安装 jQueryUI datetimepicker 插件了，你有两种可能：
A) 手动安装：
从this 网站下载.js 和.css 文件（Download 部分下给定页面上的链接）
将jquery-ui-timepicker-addon.js 文件添加到解决方案的Scripts 文件夹中
将jquery-ui-timepicker-addon.css 添加到解决方案的Content 文件夹中
B) 使用 NuGet 安装（我更喜欢这种方法）：
参考addon's NuGet page 并使用包管理器控制台安装它在您的_Layout.cshtml 中添加：
<script type="text/javascript">
$(function () $('#selectedDateTime').datetimepicker(); );
</script>
和：
<link rel="stylesheet" media="all" type="text/css" href="/Content/jquery-ui-timepicker-addon.css" />
-
最后，在您看来，这样使用它：
<input type="text" id="selectedDateTime" name="Date"/>
这将为您提供漂亮的 DateTimePicker：
请记住，input 字段的 name 参数是您提交表单时将发布的参数的名称。
我希望它对未来的人有所帮助；）。
感谢您的所有时间:)。
【讨论】：
【参考方案2】：将其复制并粘贴到记事本编辑器中，并将其保存在磁盘上，并将文件命名为 test.html。现在打开 test.html 是一个网络浏览器，它可以工作。现在跟随这个文件到后面并在你的解决方案中实现
<!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">
</head>
<body>
<div id="datetimepicker" class="input-append date">
<input type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
<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>
</body>
<html>
【讨论】：
我已将这些放在我的脚本部分，但仍然无法正常工作。 请检查您的输出（页面源代码）是否在引导之前加载了 jQuery，并且您只包含了一次。您还应该关注您的版本 - 在您的问题中，您发布了引导程序 3 的链接，但 @coderealm 已链接引导程序 2.2 - 这可能会导致（奇怪的）问题。 来源是 CDN ，因此您必须在您的开发机器上连接互联网或下载文件并添加到您的解决方案中 我按照你提供的代码，出现了 datetimepicker！但是现在我有一些其他奇怪的问题，这个选择器确实无法关闭（意味着在选择日期后包装），我发现当我的 _Layout.cshtml 中有“@Styles.Render("~/Content/css")"它不起作用，但是当我将其注释掉时，它工作得很好，所以可能是我在 css 文件夹中的一些 css 文件或脚本导致了这个问题...... 实际上是“/Content/bootstrap.css”文件导致了问题。在呈现此文件时，它会导致布局出现意外行为。如果我评论渲染这个，一切都很好......以上是关于ASP .NET MVC 5 日期和时间选择器的主要内容，如果未能解决你的问题，请参考以下文章
使用日期时间选择器进行日期和时间验证 (ASP.Net MVC Core v1.1)
使用 ASP.NET MVC C# 和引导日期选择器将不起作用