Beslinda N. Beslinda N. - 26 days ago 9
C# Question

Date picker ASP.NET c# mvc4

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

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:

enter image description here

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>

JQueryUI pick

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