Date range filter in ASP.NET Core MVC

Question

Can't populate date inputs from my model in ASP.NET Core MVC. It's accepted, but no display dates in input after filter submit Here's the code :

In model class:

public DateTime? StartDate { get; set; }
public DateTime? EndDate { get; set; }

In the view:

<span>Date after: </span><input type="date" name="startDate" id="startDate" asp-route-filterString="@Model.FilterString" class="form-control" value="@Model.StartDate"/>
<span>Date before: </span><input type="date" name="endDate" id="endDate" asp-route-filterString="@Model.FilterString" class="form-control" value="@Model.EndDate"/>

In controller:

public async Task<IActionResult> Index(...,
           string filterString,
           DateTime? startDate = null,
           DateTime? endDate = null,)
{
    // ...
    var model = new ViewModel(...)
                    {
                        StartDate = startDate.GetValueOrDefault(),
                        EndDate = endDate.GetValueOrDefault(),
                        // ... more code
                        FilterString = filterString,
                    };

    return View(model);
}

Answer 1

HTML5 input with type="date" expects the value to be a specific format which is yyyy-MM-dd. You need set this format to the values and it will work:

<input type="date" asp-for="EndDate" value="@Model.EndDate?.ToString("yyyy-MM-dd")" />