在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; }
}

结果：