Блог

Главная - Вопросы по программированию - Привязать дату и время в asp.net представление core mvc

Привязать дату и время в asp.net представление core mvc

#asp.net-core #asp.net-core-mvc

#asp.net-core #asp.net-core-mvc

Вопрос:

Я не могу привязать datetime к in view

это модель

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

в моем окне ввода отображается дата и время, а также секунды миллисекунды, которые мне не нужны.

кто-нибудь может мне помочь?

Комментарии:

1. Что произойдет, если вы просто используете: [DisplayFormat(DataFormatString="{0:dd/MM/yyyy}")] ?

2. @mxmissile Если я сделаю то, что вы предложили, предложите, чтобы в моем окне ввода отображалась дата и время, но также отображались секунды и миллисекунды

3. Существует открытая проблема, связанная с этим: github.com/dotnet/aspnetcore/issues/10992 . На данный момент я предполагаю, что обходной путь заключается в том, чтобы поместить даты в виде текстовых вводимых данных и использовать jQuery datetimepicker для их форматирования.

Ответ №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; }
}

Результат:

введите описание изображения здесь