skip to Main Content

I have a datetime picker in my view:

@Html.EditorFor(m => m.EventDate, new
    {htmlAttributes = new {
            @Value = DateTime.Today.ToShortDateString(),
            @class = "form-control datepicker" }, })

I’ve dropped the cssfiles in the directory Content in my project:


It is Twitter Bootstrap v3.0.1

And my scripts in the directory Scripts:

enter image description here

Here’s my _Layout.cshtml

<!DOCTYPE html>
<html lang="en">
    @RenderSection("meta", required: false)
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- ... -->
    <link href="~/Content/themes/flatly/bootstrap.css" rel="stylesheet">
    <link href="//"

    <!-- ... -->

    @RenderSection("scripts", required: false)

Here’s my Model

public class MyModel
    public DateTime EventDate

When I execute the web site, the rendering is different on IE or Chrome

On chrome

On Chrome


enter image description here

On FireFox

enter image description here

How to I manage the datetime picker on IE and FireFox?



  1. Chosen as BEST ANSWER

    @Stephen Muecke pointed the reason of the problem:

    Refer comparision here. The type="date" attribute is not supported in either IE-11 or FireFox-38 so you're out of luck for the time being.

    The solution I've emplemented to use HTML5 datepicker when exists or use the JQuery datepicker when it doesn't is this one:

    In _Layout.cshtml I checked this line existed and modernizr was installed in my solution (which should be the case by default)


    In the view with the datepicker, in the @section Scripts I added

    @section Scripts {
        /* ... */
        <script type="text/javascript">
            /* ... */
            if (! {

  2. The issue as nothing to do with bootstrap. Your rendering the browsers HTML5 datepicker which required the format to be yyyy-MM-dd (ISO format)

    Include the [DisplayFormat] attribute on your property

    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyInEditMode = true)]
    public DateTime EventDate { get; set; }

    and in the view, use

    @Html.EditorFor(m => m.EventDate, new
      htmlAttributes = new { @class = "form-control datepicker" }

    Note you should never override the value attribute when using a html helper (consider what happens if a user enters a date which is not todays date and submits, but because of a ModelState error you need to return the view for correction – your code would reset the users selection back to today’s date)

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top