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

Solution 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

Solution 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

Solution 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. :-)

Comments

[Beslinda N.]

Model.StartDate and Model.ENDdate are not accepted by VS in my code :/

[hutchonoid]

@BesaNeziri I've updated the answer for use without strongly typed. That will work for you now.

[hutchonoid]

Hi, the above won't work. You are specifying the class in the text field. It will output { class = datefield } within the text box. You need @Html.TextBox("StartDate", string.Empty, new {@class = "datefield"}) but I couldn't get this to work either. dotnetfiddle.net/x0CqoN Pls update if you get a chance, looks like a good answer I would like to use that in future.

[Beslinda N.]

Still does not work. Do you think it might be that the textbox are not for date only but for time as well?

[Beslinda N.]

Or maybe because this text box are connected to this from another view : @Html.ActionLink("", "List", "Card", new { startdate = DateTime.Today.Date, enddate = DateTime.Today.Date.AddDays(7)}, null)

[hutchonoid]

@BesaNeziri See the working example in the update link above.

[Beslinda N.]

Nothing works even when I add the same example as in the web . It does not work. Do you know if there is any restriction using javascript on view in mvc4, I use webgrid aswell?

[hutchonoid]

@BesaNeziri I don't, the example is a simple example on it's own. I would check the browser console for any errors but it may be a wider issue than this question could/would cover. Good luck.

[Jared Hooper]

I need to edit my response when I get the chance, @hutchonoid is correct -- it should be TextBoxFor. I'm going to check the dependencies to make sure this isn't a JQuery/Foundation/Bootstrap thing.

[Beslinda N.]

I made it work with TextBox, the problem was on @bundles I needed to change its place, put it above on the first line of the file.

[Jared Hooper]

Awesome. Glad you found a solution @BesaNeziri