在 asp.net core mvc 视图中绑定日期和时间答案

【问题标题】：Bind date and time in asp.net core mvc view在 asp.net core mvc 视图中绑定日期和时间
【发布时间】：2020-08-18 16:56:07
【问题描述】：

我无法将日期时间绑定到视图中

这是模型

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}")]

我的输入框显示日期时间和我不想要的秒毫秒。

有人可以帮我吗？

【问题讨论】：

如果你只使用：[DisplayFormat(DataFormatString="{0:dd/MM/yyyy}")]会发生什么？
@mxmissile 如果我按照你的建议做我的输入框显示日期时间，但它也显示秒和毫秒
有一个未解决的问题：github.com/dotnet/aspnetcore/issues/10992。现在我想解决方法是将日期作为文本输入，并使用 jQuery datetimepicker 来格式化。

标签： asp.net-core asp.net-core-mvc

【解决方案1】：

这是一个使用 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; }
}

结果：

【讨论】：