Как я могу изменить формат выбора даты на ДД / ММ / ГГГГ в Razor

Question

Как установить формат пикета с датой в дд / мм / гггг Я использовал этот формат в модели. Но тип ввода отображается не так, как созданная мною модель.

[Display(Name = "Dredger Time")]
        [DataType(DataType.Date)]
        [DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}",
         ApplyFormatInEditMode = true)]
        public DateTime DredgingTime { get; set; }

Мне нужна его функциональность в ASP. Я попробовал какой-то метод jQuery, но ни один из них не работает.

<div class="form-group">
                <label asp-for="DredgingTime" class="control-label"></label>
                <input id="datepicker" asp-for="DredgingTime" class="form-control" />
                <span asp-validation-for="DredgingTime" class="text-danger"></span>
            </div>

Еще одна помощь, я не понимаю, где работает такая функция "asp-for" ... Я новичок в ASP, но не какпросто как PHP

Answer 1

Когда вы применяете атрибут [DataType(DataType.Date)], Razor визуализирует ввод с типом «дата». Это тип ввода HTML 5, и во всех современных браузерах он будет отображаться как элемент управления браузера (календарь, который вы получаете по умолчанию). Тем не менее, управление браузером также вызывает две вещи:

1. Дата будет отображаться локально (т. Е. MM / DD / YYYY в США)
2. Значение будет установлено как ISO (ГГГГ-ММ-ДД) и должны быть указаны как ISO. Значение, установленное не в формате ISO, будет считаться нулевым, и дата не будет установлена.

Хотя на самом деле это хорошие вещи. Дата должна отображаться локализованно, и , вы должны работать с датами ISO, идущими назад и вперед с сервера. Однако, если вы по какой-то причине полностью против этого, вы не можете использовать этот элемент управления браузера. Единственный способ обойти это - указать текст как текст:

<input id="datepicker" asp-for="DredgingTime" type="text" class="form-control" />

Затем ввод будет отображаться как текстовое поле, и любой формат, который вы установили, будет применяться. Однако теперь вы также откажетесь от всей встроенной проверки даты. Теперь это просто обычный текст, поэтому пользователь может поместить туда что угодно . Таким образом, вы должны использовать библиотеку JS какого-либо рода, чтобы гарантировать, что она является действительной датой и в том формате, который вы ожидаете.

Answer 2

Установите формат DatePicker в вашем JQuery, как показано ниже:

@section Scripts
{
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.css"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.js"> 
  </script>
  <script type="text/javascript">
    $(document).ready(function () {
        $("#datepicker").datepicker({
            format: 'dd/mm/yyyy'
        })
    });
  </script>
}

Результат: