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

Answer 2

MVC has a built in class datefield which will, upon entering the field, open a module that will allow them to select a date.

<fieldset>
    <legend>Search criteria</legend>
    @Html.LabelFor( model => Model.StartDate, "Start Date:")
    @Html.TextBoxFor( model => Model.StartDate, new {@class = "datefield"})
    @Html.LabelFor( model => Model.EndDate, "End Date:")
    @Html.TextBoxFor( model => Model.EndDate, new {@class = "datefield"})        
    <input type="submit" value="Apply" />
</fieldset>

That should solve it.

Someone mentioned using datepicker via JQueryUI , but datefield is something I believe is supported natively in Microsoft's MVC

Answer 3

Just as a additional point to what Hutchonoid was saying. If you want to do model linking you would do the following using TextBoxFor:

@Html.TextBoxFor(model => model.StartDate, new { @class="datefield", @type="date" })

It is important to include the type in the HTML attributes object that you pass in as the second parameter to TextBoxFor otherwise it will not create the input type of date and it will remain a textbox.

Hope this helps someone out. :-)

Answer 4

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

That should solve it.

Answer 5

This is the code that worked for me:

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

    @Scripts.Render("~/bundles/jqueryui")
    @Styles.Render("~/Content/themes/base/css")

    <script type="text/javascript">
        $(document).ready(function () {
            $("#Dob").datepicker({
                changeMonth: true,
                changeYear: true
            });
        });
    </script>
}