Date picker ASP.NET c# mvc4

Question

How to add a datepicker for this code:

<fieldset>
        <legend>Search criteria</legend>
        @Html.Label("StartDate", "Start Date:")
        @Html.TextBox("StartDate")
        @Html.Label("enddate", "End Date:")
        @Html.TextBox("enddate")        
        <input type="submit" value="Apply" />
    </fieldset>

I want to show a datepicker for startdate and one for end date.

Thank you

Answer 1

Html 5 solution

If you are intending to use HTML 5 you can simply specify a type on the input as follows:

@Html.TextBox("StartDate", Model.StartDate, new { @class = "datepicker", @type="date" })

Which would render a date control:

JSFiddle

JQuery UI solution

You could also use Jquery UI for this:

 <fieldset>
    <legend>Search criteria</legend>
    @Html.Label("StartDate", "Start Date:")
    @Html.TextBox("StartDate", string.Empty, new { @class = "datepicker" })
    @Html.Label("enddate", "End Date:")
    @Html.TextBox("enddate", string.Empty, new { @class = "datepicker" })        
    <input type="submit" value="Apply" />
</fieldset>

<script>
  $(function() {
    $( ".datepicker" ).datepicker();
  });
</script>

The above adds a datepicker class to the TextBox and then runs the javascript to decorate them.

http://jqueryui.com/datepicker/

pls note I have stuck with Textbox but I would use TextBoxFor instead.

Update

See the working example below.

Dot Net Fiddle