Filter by DateTime Range MVC 5

Question

Good evening everyone, I home, anyone can help my with Date time range filter on view part. Here is my model:

public class IndexVM
{
    public DateTime? StartDate { get; set; }
    public DateTime? EndDate { get; set; }
    public virtual ICollection<Order> Orders { get; set; }

}

I'm using view models for display, now here is my controller:

public ActionResult Index(DateTime? start, DateTime? end)
    {

        var orders = db.Orders
            .Where(x => x.OrderStatus == 3
            && x.ClosedAt > start
            && x.ClosedAt < end)
            .OrderByDescending(x => x.LastUpdateAt)
            .ToList();

        IndexVM model = new IndexVM();
        model.StartDate = start;
        model.EndDate = end;
        model.Orders = orders;
        return View(model);
    }

Now I have some problems with view.

Here is My QUESTION: How to pass start and end date to controller to get orders with defined properties? Here is My View and what I'm doing wrong?

@using (Html.BeginForm())
{
    <div class="form-horizontal">
        <div class="form-group form-group-sm">
            <div class="col-md-8">
                @Html.TextBoxFor(model => model.StartDate, "{0:MM/dd/yyyy}", new { @class = "date-picker form-control", @id = "start", @placeholder = "Start Date" })
            </div>
        </div>
        <div class="form-group form-group-sm">
            <div class="col-md-8">
                @Html.TextBoxFor(model => model.EndDate, "{0:MM/dd/yyyy}", new { @class = "date-picker form-control", @id = "end", @placeholder = "End Date" })
            </div>
        </div>
        <div class="form-group-sm">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" /> <span> </span>
            </div>
        </div>
    </div>
}

Solution

Controller

public ActionResult Index(DateTime? start, DateTime? end)
    {
  ViewBag.start = start;
            ViewBag.end = end;
        var orders = db.Orders
            .Where(x => x.OrderStatus == 3
            && x.ClosedAt > start
            && x.ClosedAt < end)
            .OrderByDescending(x => x.LastUpdateAt)
            .ToList();


        return View(orders);
    }

View

@using (Html.BeginForm())
{
    <div class="form-horizontal">
        <div class="form-group form-group-sm">
            <div class="col-md-8">
               @Html.TextBox("start", null, new { @class = "form-control datepicker" }) 
            </div>
        </div>
        <div class="form-group form-group-sm">
            <div class="col-md-8">
               @Html.TextBox("end", null, new { @class = "form-control datepicker" })
            </div>
        </div>
        <div class="form-group-sm">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" /> <span> </span>
            </div>
        </div>
    </div>
}

Comments

[Andre]

That doesn't work for me. It just gives 2 text input boxes. Could you update with a full solution?