[英]Bootstrap DateTimePicker in ASP.Net MVC 5
I have a Bootstrap Modal in ASP.Net with MVC 5 which I use to edit an entry on a FullCalendar javascript plugin. 我在ASP.Net中有一个带有MVC 5的Bootstrap模式,我用它来编辑FullCalendar javascript插件上的条目。
_Edit.cshtml: _Edit.cshtml:
@model Models.CalendarEntry
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Edit Calendar Entry</h4>
</div>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="modal-body">
<div class="form-horizontal">
<h4>@Model.Title</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.HiddenFor(model => model.CalendarEntryId)
@Html.HiddenFor(model => model.PostId)
<div class="form-group">
@Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.EntryDateTime, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="input-group" id="datetimepicker">
@Html.EditorFor(model => model.EntryDateTime, new { htmlAttributes = new { @class = "form-control" } })
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
@Html.ValidationMessageFor(model => model.EntryDateTime, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Length, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Length, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Length, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.EntryStatus, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EnumDropDownListFor(model => model.EntryStatus, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.EntryStatus, "", new { @class = "text-danger" })
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" type="button">Cancel</button>
<input class="btn btn-primary" type="submit" value="Save" />
</div>
<script>
$(document).ready(function ()
{
$("#datetimepicker").datetimepicker();
});
</script>
}
For some reason two things are happening that I cannot figure out why. 出于某种原因,有两件事情发生,我无法弄清楚为什么。
Firstly, the glyphicon-calendar
does not sit next to the input: 首先,
glyphicon-calendar
不会位于输入旁边:
Secondly, when the Modal Form load, all the other fields except for the datetime field gets populated with data, until I click the calendar glyphicon, then the datetime field gets populated with the current date and time. 其次,当模态窗体加载时,除了日期时间字段之外的所有其他字段都会填充数据,直到我单击日历字形,然后日期时间字段将填充当前日期和时间。 The value from the model never gets displayed.
模型中的值永远不会显示。
Web interfaces are not my forté and would appreciate any assistance. Web界面不是我的强项,我将不胜感激。
When you create a new MVC project, it comes with a default css file(Site.css) which has some predefined css styles in it. 当您创建一个新的MVC项目时,它带有一个默认的css文件(Site.css),其中包含一些预定义的CSS样式。 By default, it has input field's
max-width
defined as 280px
. 默认情况下,它将输入字段的
max-width
定义为280px
。 That is the reason, your input groups are not working as expected. 这就是原因,您的输入组未按预期工作。
If you remove/make adjustments to this css class in your ~/Content/Site.css
, You css problem will be resolved. 如果您在
~/Content/Site.css
删除/调整此css类,则将解决您的css问题。
turns out, that I needed to set options for the datetimepicker, more specifically, a default value it would seem like: 事实证明,我需要为datetimepicker设置选项,更具体地说,它是一个默认值:
<script>
$(document).ready(function ()
{
$("#datetimepicker").datetimepicker(
{
defaultDate: '@Model.EntryDateTime',
showTodayButton: true,
format: 'YYYY-MM-DD HH:mm',
showClose: true,
showClear: true,
toolbarPlacement: 'top',
stepping: 15
});
});
</script>
Another quick solution is to also format the date like this in your javascript: 另一个快速解决方案是在javascript中格式化这样的日期:
defaultDate: '@Model.EntryDateTime.ToString("yyyy-MM-dd HH:mm")'
The solution of using the [DisplayFormat] as an attribute is just as valid if not a better solution. 使用[DisplayFormat]作为属性的解决方案同样有效,如果不是更好的解决方案。
<div class="container">
<div class="row">
<div class='col-md-12'>
<div class="form-group">
<span col-sm-6> @Html.Label("Date of Birth", htmlAttributes: new { @class = "control-label col-md-2" })</span>
<div class='input-group date col-sm-3' id='datetimepicker1'>
@Html.EditorFor(model => model.DateOfBirth, new { htmlAttributes = new { @class = "form-control" } })
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
@Html.ValidationMessageFor(model => model.DateOfBirth, "", new { @class = "text-danger" })
</div>
</div>
</div>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.