Datapicker to filter data with date range

I am searching data on the database in accordance to date range.

In the search box how can I make the data to be picked from the datapicker.

Here is my code :

 public ActionResult List(DateTime startDate, DateTime endDate)
    {
        //var cards = new List<Card>();

        //using (CardDBEntities _db = new CardDBEntities() )
        //{
        //    cards = _db.Cards.ToList();
        //}

        using (var db = new CardDBEntities())
        {
            var cards = (from c in db.Cards
                         join d in db.RegistrationDTs
                         on c.CardId equals d.CardId
                         where d.RegistrationDateTime >= startDate &&
                               d.RegistrationDateTime <= endDate
                         select new Model
                         {
                             CardId = d.CardId,
                             Description = c.Description,
                             RegistrationDateTime = d.RegistrationDateTime
                         }).OrderByDescending(x => x.RegistrationDateTime)
                          .ToList();

            ViewData["cards"] = cards;

            return View();

and my view :

@using(Html.BeginForm())
{
<fieldset>
    <legend>Search criteria</legend>
    @Html.Label("startDate", "Start Date:")
    @Html.TextBox("startDate", null, new { @class = "DateTime" })
    @Html.Label("endDate", "End Date:")
    @Html.TextBox("endDate", null, new { @class = "DateTime" })
    <input type="submit" value="Apply" />
</fieldset>

Thank you in advance

Solution

You can use jQueryUI DatePicker

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Select a Date Range</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#from" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });
  });
  </script>
</head>
<body>

<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">


</body>
</html>

Working JSFIDDLE: http://jsfiddle.net/18h8zfr8/

Just go through DatePicker API, you will find more options..