ASP .NET MVC 5日期和时间选择器
在我的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属性中设置事件的日期和时间。
目前，我允许在我的视图中使用Date修改@Html.JQueryUI().DatepickerFor(model => model.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，此消息已经太长了。） - 如果我现在将@coderealm提供的示例HTML代码的
<body>部分放入我的Create.cshtml视图文件中（我把它放在最后添加的div元素之前ActionLink返回同一控制器内的Index.cshtml：here
在我重新加载我的View之后粘贴此代码之后，它会改变它的外观（实际上只在<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>
它添加了新的DateTimePicker，但是在选择日期和时间之后它会停留在这种状态：
并且我无法关闭此DatetimePicker，当我点击某个地方时它不会消失。它这次产生的HTML代码是（抱歉，我需要将它放在PasteBin上，因为超出了消息的长度）：here。
我希望有人能够帮助我，因为它已经让我发疯了......我不是最初的网络开发人员，所以我可能在我的观点中搞砸了一些东西，也许我没有正确加载脚本或其他东西。 ..
再一次 - 提前感谢您的帮助！
2 个答案:
答案 0 :(得分：0)
将其复制并粘贴到记事本编辑器中并将其保存在磁盘上，将文件命名为test.html。现在打开test.html是一个Web浏览器，它可以工作。现在请关注此文件，并在解决方案中实施
<!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>
答案 1 :(得分：0)
我终于找到了解决方案。
关于我原来的问题，我仍然不知道发生了什么事它没有用，但我发现了另一种方式：）。
我决定使用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并使用Package Manager Console 进行安装
- 来自this网站下载.js和.css文件（
-
在
_Layout.cshtml添加： - 最后，在您的视图中使用它：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
<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：
请注意，name字段的input参数是您在提交表单时发布的参数名称。
我希望将来可以帮助某人;）。
感谢你所有的时间:)。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？