Date range filter in ASP.NET Core MVC

Issue

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);
}

Solution

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")" />

Answered By – Dimitris Maragkos

Answer Checked By – Clifford M. (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.