Изменение формата даты, связанное с ASP.NET Core 8 MVC с помощью javascript

Question

Это мое представление HTML:

      <form method="post"
      asp-action="GetVillasByDate">
    <div class="row p-0 mx-0 py-4">

        <div class="col-12 col-md-5  offset-md-1 pl-2  pr-2 pr-md-0">
            <div class="form-group">
                <label>Check In Date</label>
                <input asp-for="CheckInDate" type="date" class="form-control" />
            </div>
        </div>

        <div class="col-8 col-md-3 pl-2 pr-2">
            <div class="form-group">
                <label>No. of nights</label>
                <select class="form-select" asp-for="Nights">
                    @for(var i = 1; i<11; i++)
                    {
                        <option value="@i">@i</option>
                    }
                </select>
            </div>
        </div>

        <div class="col-4 col-md-2 pt-4 pr-2">
            <div class="form-group">
                <button type="button" onclick="fnLoadVillaList()" class="btn btn-success btn-block">
                    <i class="bi bi-search"></i>  &nbsp; Check Availability
                </button>

            </div>
        </div>

    </div>
    <partial name="_VillaList" model="Model" />
</form>

      @section scripts {
    <script>
        function fnLoadVillaList() {
            $('.spinner').show();
            var objData = {
                
                checkInDate: $("#CheckInDate").val(),
                nights: $("#Nights").val()
            };

            $.ajax({
                type: "POST",
                data: objData,
                url: "@Url.Action("GetVillasByDate", "Home")",
                success: function (data) {
                    $("#VillasList").empty();
                    $("#VillasList").html(data);
                    $('.spinner').hide();
                },
                failure: function (response) {
                    $('.spinner').hide();
                    alert(response.responseText);
                },
                error: function (response) {
                    $('.spinner').hide();
                    alert(response.responseText);
                }
            });
        }
    </script>
}

Я использовал Visual Studio ASP.NET Core 8 MVC, и в своем проекте я ввожу дату в метод ввода и отлаживаю, когда дата меняется на месяц. Например, при отладке с датой 15.10.2023 отображается дата 0001.01.01, а при отладке с датой 5.6.2023 отображается дата 6.5.2023. Как это решить?

Answer 1

Когда данные передаются между клиентом и сервером, они обычно имеют форму строк. Если строка даты, передаваемая клиентом, не соответствует формату даты, ожидаемому сервером, у сервера могут возникнуть проблемы при попытке ее анализа, что приведет к использованию значения по умолчанию (0001-01-01 00:00:00). . Вам необходимо убедиться, что строка даты, передаваемая на сервер, имеет формат даты, приемлемый для сервера. Если сервер использует определенный формат даты или настройку часового пояса, клиент должен соответствующим образом отформатировать строку даты. По умолчанию браузер предоставляет формат даты, основанный на операционной системе пользователя или настройках браузера, в результате чего формат даты отличается от ожидаемого. Непоследовательный.

Чтобы обеспечить согласованное форматирование даты, вы можете явно указать формат даты, а не полагаться на настройки браузера по умолчанию. Вы можете использовать JavaScript для преобразования входной даты в строку в формате ISO. Убедитесь, что этот формат даты правильно обрабатывается на стороне сервера.

      function fnLoadVillaList() {
     $('.spinner').show();
     var rawDate = $("#CheckInDate").val();
     var nights = $("#Nights").val();

     var isoDate = new Date(rawDate).toISOString();
     var objData = {
         checkInDate: isoDate,
         nights: nights
     };

Обновлено:

      [HttpPost]
    public IActionResult GetVillasByDate(DateTime checkInDate, int nights)
    {
            
        var villaList = new List<Villa>
    {
        new Villa { Id = 1, Name = "Luxury Villa 1", AvailableDate = new DateTime(2023, 12, 1) },
        new Villa { Id = 2, Name = "Beachfront Villa", AvailableDate = new DateTime(2023, 12, 5) },
        new Villa { Id = 3, Name = "Mountain View Villa", AvailableDate = new DateTime(2023, 12, 7) },
           
    };

        var availableVillas = villaList
            .Where(villa => villa.AvailableDate >= checkInDate && villa.AvailableDate <= checkInDate.AddDays(nights - 1))
            .ToList();

        return PartialView("_VillaList", availableVillas);
    }
}

Частичный просмотр:

      @model List<Villa>

<div>
    <h3>Available Villas</h3>
    @if (Model != null && Model.Any())
    {
        <ul>
            @foreach (var villa in Model)
            {
                <li>@villa.Name - Available on: @villa.AvailableDate.ToShortDateString()</li>
            }
        </ul>
    }
    else
    {
        <p>No available villas found.</p>
    }
</div>

Когда я выбираю соответствующую дату:

После того, как я нажму кнопку: