ASP.NET MVC Date Input Not Binding Correctly in AJAX Post Request

I have built a form which take checkInDate and nights as input. But in the backend when I am debugging it is not showing the date correctly. It is displaying nights correctly but checkInDate is shown as 01-01-0001.

This is index.cshtml:

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

@section scripts{
    <script>
        function fnLoadVillaList() {
            $('.spinner').show();
            // Retrieve the values using jQuery
            var checkInDate = $("#CheckInDate").val();
            var nights = $("#Nights").val();

            console.log("CheckInDate:", checkInDate); // Debug log
            console.log("Nights:", nights); // Debug log
            var objData = {
                checkInDate: checkInDate,
                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>
}

After I click on submit, I checked the value of checkInDate in script, it is shown as 01-01-0001 which not the input which I provided. Below is the GetVillasByDate action method

[HttpPost]
public IActionResult GetVillasByDate(int nights, DateOnly checkInDate)
{
    var villaList = _unitOfWork.Villa.GetAll(IncludeProperties: "VillaAmenity").ToList();

    foreach (var villa in villaList)
    {
        if (villa.Id % 2 == 0)
        {
            villa.IsAvailable = false;
        }
    }

    HomeVM homeVM = new()
    {
        CheckInDate = checkInDate,
        VillaList = villaList,
        Nights = nights
    };

    return PartialView("_VillaList",homeVM);
}

And the below is the HomeVM.cs:

using WhiteLagoon.Domain.Entities;

namespace WhiteLagoon.Web.ViewModels
{
    public class HomeVM
    {
        public IEnumerable<Villa>? VillaList { get; set; }
        public DateOnly CheckInDate { get; set; }
        public DateOnly? CheckOutDate { get; set; }
        public int Nights { get; set; }
    }
}

But when I am displaying the checkInDate in UI or logging the checkInDate it is showing correctly, but I have used the checkInDate in backend to calculate the checkOutDate, which is checkInDate added to number of nights, now the checkOutDate is not calculated correctly as checkInDate in backend is not correct.

I think there is an problem with how I am sending the date input from script, I am sending it through separate script because I wanted to update only that part of the page which is dependent on checkInDate and nights.

Below is the _VillaList.cshtml:

@model HomeVM

<div id="VillasList">
    <div class="row px-lg-5 m-lg-4 m-sm-0 px-sm-0" style="--bs-gutter-x:0">

    @foreach (var villa in Model.VillaList)
    {
        <div class="p-4 col-md-12 col-lg-6">
            <div class="row" style="border-radius:5px; border: 1px solid #aaa">
                <div class="col-4 p-2">
                    <img class="d-block w-100" style="border-radius:5px;" src="@villa.ImageUrl">
                </div>
                <div class="col-8">
                    <div class="d-flex justify-content-between">
                        <p class="card-title text-warning" style="font-size:xx-large">@villa.Name</p>
                        <div class="pt-2">
                            <button type="button" class="btn btn-sm btn-outline-success" data-bs-toggle="modal" data-bs-target='#exampleModal-@(villa.Id)'>
                                Details
                            </button>
                        </div>
                    </div>
                    <p class="card-text">
                        @Html.Raw(villa.Description)
                    </p>
                </div>
                <div class="col-12">
                    <div class="row pb-3 pt-2">
                        <div class="col-4">
                            @if (Model.CheckInDate > DateOnly.FromDateTime(DateTime.Now))
                            {
                                if (villa.IsAvailable)
                                {
                                    <a asp-controller="Booking" asp-action="FinalizeBooking" 
                                    asp-route-villaId="@villa.Id" asp-route-checkInDate="@Model.CheckInDate" asp-route-nights="@Model.Nights"
                                           class="btn btn-success form-control btn-block" >
                                        Book
                                    </a>
                                }
                                else
                                {
                                    <a class="btn btn-outline-danger disabled form-control btn-block">
                                        Sold Out
                                    </a>
                                }
                            }
                        </div>
                        <div class="col-4">
                            <span class="">Max Occupancy : @villa.Occupancy adults </span><br />
                            <span class=" pt-1">Villa Size : @villa.Sqft sqft</span><br />
                        </div>
                        <div class="col-4">
                            <span class="text-warning float-end font-weight-bold pt-1" style="font-size:25px;">
                                USD
                                <span style="border-bottom:1px solid #ff6a00">
                                    @villa.Price.ToString("c")
                                </span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="exampleModal-@(villa.Id)" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl" style="border: 1px solid #aaa; border-radius:7px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-3 text-success" id="exampleModalLabel">Villa Details</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body m-0">
                        <partial name="_VillaDetail" model="@villa" />

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">Close</button>
                    </div>

                </div>
            </div>
        </div>
    }
</div>
</div>

Here is the FinalizeBooking action method in BookingController:

    public IActionResult FinalizeBooking(int villaId, DateOnly checkInDate, int nights)
    {
        Booking booking = new()
        {
            VillaId = villaId,
            Villa = _unitOfWork.Villa.Get(u => u.Id == villaId, IncludeProperties:"VillaAmenity"),
            CheckInDate = checkInDate,  
            Nights = nights,
            CheckOutDate= checkInDate.AddDays(nights),
        };

        booking.TotalCost = booking.Villa.Price * nights;

        return View(booking);
    }

The checkInDate is correct till I get villa list in UI, but after getting villa list in UI, when I click "Book" button the checkInDate date is becoming 01-01-0001.

Before clicking "Book" button in GetVillasByDate:

After I click "Book" button