CODEWITHSUNDEEP
c#asp.net-mvc-5
JiBéDoublevé
JiBéDoublevé

Reputation: 4269

Datetime picker doesn't appear in Internet Explorer and FireFox with Bootstrap

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:

Image

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">
<head>
    @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="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"
          rel="stylesheet">


    <!-- ... -->

    @Scripts.Render("~/js")    
    @RenderSection("scripts", required: false)
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
</body>
</html>

Here's my Model

public class MyModel
{
    [DataType(DataType.Date)]
    public DateTime EventDate
    {
        get;
        set;
    }

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

On chrome

On Chrome

On IE

enter image description here

On FireFox

enter image description here

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

Upvotes: 1

Views: 3440

Answers (2)

JiB&#233;Doublev&#233;
JiB&#233;Doublev&#233;

Reputation: 4269

@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)

@Scripts.Render("~/bundles/modernizr")

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

@section Scripts {
    /* ... */
    <script type="text/javascript">
        /* ... */
        if (!Modernizr.inputtypes.date) {
            $('.datepicker').datepicker();
        }
    });

</script>

Upvotes: 2

user3559349
user3559349

Reputation:

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

[DataType(DataType.Date)]
[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)

Upvotes: 0

Related Questions