asp.net mvc HTML5 date input type

Question

I am working an asp.net mvc in visual studio 2013 and one of the fields is a date input but when clicking in the field and having focus in the field the automatic HTML5 datepicker does not come up. If I put the field in manually it comes up but then it doesn't map to that particular field. In the data annotations I have included [DataType(DataType.Date)] but this doesn't bring up the HTML5 date picker. How do I achieve this in asp.net below is the code for the field in particular

<div class="form-group">
    @Html.LabelFor(model => model.CustomerJoinDate, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.CustomerJoinDate, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.CustomerJoinDate, "", new { @class = "text-danger" })
    </div>
</div>

What about adding the attribute type="date" into the htmlattributes brackets? — gardarvalur
– gardarvalur, Commented Aug 23, 2015 at 15:50
Thanks for the suggestions guys, what i did was put the type="date" in the html attributes in the "EditorFor" line and that did the trick — ShatterStar
– ShatterStar, Commented Aug 23, 2015 at 17:10
I put in the example in my answer if you want to use the editorfor instead of textboxfor — gardarvalur
– gardarvalur, Commented Aug 23, 2015 at 17:33

Darin Dimitrov · Accepted Answer · 2015-08-23 15:50:35Z

9

Can't remember exactly when this was added but in older versions of ASP.NET MVC you could either modify the default editor template to add support for it or use TextBoxFor which allows you to specify any custom attributes:

@Html.TextBoxFor(model => model.CustomerJoinDate, new { 
    @class = "form-control", 
    type = "date" 
})

answered Aug 23, 2015 at 15:50

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tieson T. · Accepted Answer · 2015-08-23 17:07:26Z

If you want your DateTime model properties to use the same template without having to repeat the same Razor code over and over, define a partial view called DateTime.cshtml (or DateTime.vbhtml) in your Shared/EditorTemplates folder, with content similar to:

@model DateTime

@Html.TextBoxFor(
    m => m, 
    "{0:MM/dd/yyyy}", 
    new { @class = "form-control date", type = "date" })

Then replace your Razor bindings with:

@Html.EditorFor(model => model.CustomerJoinDate)

and so on, for each date field which should use this template.

This uses an overload of TextBoxFor that allows you to specify a format string for the input, which is helpful for "masking" the time portion of the DateTime value (assuming you only want to enter a date).

Since not every browser supports a native datepicker, you could use the date class in this example to apply a polyfill as necessary (or simply use type=date as your selector).

gardarvalur · Accepted Answer · 2015-08-23 17:32:26Z

2

MVC 5.1 now supports using html attributes directly like so. You should be able to put date into the type attibute.

<div class="form-group">
@Html.LabelFor(model => model.CustomerJoinDate, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
    @Html.EditorFor(model => model.CustomerJoinDate, new { htmlAttributes = new { @class = "form-control", type = "date" } })
    @Html.ValidationMessageFor(model => model.CustomerJoinDate, "", new { @class = "text-danger" })
</div>

answered Aug 23, 2015 at 17:32

gardarvalur

1,5859 gold badges40 silver badges68 bronze badges

Comments

EdSF · Accepted Answer · 2015-08-23 16:35:22Z

1

See Darin's answer regarding input type="date" via TextBoxFor

"...but when clicking in the field and having focus in the field the automatic HTML5 datepicker does not come up"

At the base level, not all browsers have "native" implementation of a "datepicker", so you'll likely need to implement a plugin to work across browsers (e.g. bootstrap datepicker and such)

Example:

<p>
  See if you get a datepicker in Firefox (as of v40.0.2):
  <br />
  <input type="date" name="foo" />
</p>

Hth...

edited Aug 23, 2015 at 16:35

answered Aug 23, 2015 at 16:10

EdSF

12.5k6 gold badges45 silver badges85 bronze badges

Collectives™ on Stack Overflow

asp.net mvc HTML5 date input type

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related