如何解决在ASP.NET Core MVC视图中绑定日期和时间
我无法将日期时间绑定到视图中
这是模型
public class ListaDisponibiliModel
{
[DisplayFormat(DataFormatString = "{0:f}",ApplyFormatInEditMode = true)]
public DateTime DataOraInizio { get; set; }
[DisplayFormat(ApplyFormatInEditMode = true,DataFormatString = "{0:dd/MM/yyyy HH:mm}")]
public DateTime DataOraFine { get; set; }
}
我用此代码通过控制器调用视图
public IActionResult ListDisponibili()
{
ListaDisponibiliModel ldm = new ListaDisponibiliModel()
{
DataOraInizio = DateTime.Now.AddDays(1),DataOraFine = DateTime.Now.AddDays(1).AddHours(3),Tipologie = es.Tipologie,Disponibili = new List<DisponibiliModel>()
};
return View(ldm);
}
鉴于我有此标记
@model ServiziAPagamento.Models.Disponibilita.ListaDisponibiliModel
@{
ViewData["Title"] = "ListDisponibili";
}
<h1>Composizione servizi</h1>
<h3>Dati servizio</h3>
<div class="container-fluid">
<form asp-action="ListDisponibili">
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label class="control-label">Data e ora inizio</label>
<input class="form-control" asp-for="DataOraInizio" />
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label class="control-label">Data e ora fine</label>
<input class="form-control" asp-for="DataOraFine" />
</div>
</div>
当我运行页面时,输入框保持清晰。但是如果我删除
[DisplayFormat(DataFormatString = "{0:f}",ApplyFormatInEditMode = true)]
或
[DisplayFormat(ApplyFormatInEditMode = true,DataFormatString = "{0:dd/MM/yyyy HH:mm}")]
我的输入框显示日期时间以及我不需要的秒毫秒。
有人可以帮我吗?
解决方法
以下是使用Tempus Dominus(bootstrap-datetimepicker)的示例。
@model ListaDisponibiliModel
@{
ViewData["Title"] = "ListDisponibili";
}
<h1>Composizione servizi</h1>
<h3>Dati servizio</h3>
<div class="container-fluid">
<form asp-action="ListDisponibili">
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label class="control-label">Data e ora inizio</label>
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input class="form-control datetimepicker-input" asp-for="DataOraInizio" type="text" data-target="#datetimepicker1" />
<div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label class="control-label">Data e ora fine</label>
<div class="input-group date" id="datetimepicker2" data-target-input="nearest">
<input class="form-control datetimepicker-input" asp-for="DataOraFine" type="text" data-target="#datetimepicker2" />
<div class="input-group-append" data-target="#datetimepicker2" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
@section Scripts{
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" />
<script>
$('#datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY HH:mm'
});
$('#datetimepicker2').datetimepicker({
format: 'DD/MM/YYYY HH:mm'
});
</script>
}
型号:
public class ListaDisponibiliModel
{
[DisplayFormat(ApplyFormatInEditMode = true,DataFormatString = "{0:dd/MM/yyyy HH:mm}")]
public DateTime DataOraInizio { get; set; }
[DisplayFormat(ApplyFormatInEditMode = true,DataFormatString = "{0:dd/MM/yyyy HH:mm}")]
public DateTime DataOraFine { get; set; }
}
结果:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。