Date format changing

Question

I used Visual Studio ASP.NET Core 8 MVC, and in my project I enter the date in input method and debug when the date changes to month. For example, debugging with the date 15.10.2023 shows the date 0001.01.01, and debugging with the date 5.6.2023 shows the date 6.5.2023. How to solve this? My scripts

@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>
}

                                       my chtml razor page .         

Stack Overflow
Products
Silent Assassin's user avatar
Silent Assassin
1
Date format change connected with ASP.NET Core 8 MVC with javascript
Asked 3 days ago
Modified 2 days ago
Viewed 33 times
0

This is my HTML view:

<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>                 

Answer 1

The issue is that your date is specified in the format of your user's browser culture (DD.MM.YYYY), which appears to be non-US, but your server application appears to be attempting to parse it as a US date format. Typically the best approach is to pass your dates in a culture-agnostic format such as a unix timestamp or an ISO date string.

I don't know how you're handling this on the server side, but if you change this:

$("#CheckInDate").val()

For this:

new Date($("#CheckInDate").val()).toISOString()

Then hopefully your server side code will interpret this correctly.

Answer 2

because you set the type="date", the browser (at least modern) returns the value as yyyy-dd-mm, but displays in the local culture format.

you don't show the model binding, so we can not tell why the error. if you just mapped to DateTime? all should be good. if a string field then it should be yyyy-mm-dd format.