ASP.NET C # mvc4 Date Picker

Question

How to add datupixer 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 datepicker for startdate and one for end date.

thanks

Answer 1

HTML 5 solution

If you intend to use HTML 5, you can simply specify the input type as follows:

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

To make date management:

Jsfiddle

JQuery UI Solution

You can 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 the datepicker class to the TextBox, and then runs javascript to decorate them.

http://jqueryui.com/datepicker/

Notice that I am stuck in a text box, but would use TextBoxFor instead.

Update

See a working example below.

Dot net fiddle

Answer 2

MVC has a built-in datefield class datefield , when entered into a field, opens a module that allows 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> 

This should solve the problem.

Someone mentioned using datepicker via JQueryUI , but datefield is what, in my opinion, is supported in Microsoft MVC

Answer 3

Just like the extra moment that Hathonoid was talking about. If you want to bind to a model, you will 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 attribute object that you pass as the second parameter to the TextBox. Otherwise, it will not create a date input type and will remain a text box.

Hope this helps someone. :-)

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> 

This should solve the problem.

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> }