How to use Bootstrap Datepicker with Microsoft Edge

Question

I am having trouble with the Bootstrap Datepicker specifically with Edge. Chrome, Firefox, and Internet Explorer version 11 work as expected, but Edge is doing something really strange and undesired.

I tried using the jQuery UI datepicker and I didn't have any success, so I rolled back to Bootstrap. Is there some way to get Bootstrap datepicker to work with Edge? Or, is there another datepicker technique that will work? I'm really hoping something hacky isn't required.

In my Razor View (in an MVC web project) I have:

@Html.EditorFor(model => model.DateCreditEarned, 
                new { htmlAttributes = new { @class = "form-control" } })

and at the bottom of the View I have:

@section styles {        
<link href="~/Content/bootstrap-datepicker3.css" rel="stylesheet" />
}

@section scripts {
<script src="~/Scripts/bootstrap-datepicker.js"></script>
    <script>
        $(document).ready(function () {
            $("#DateCreditEarned").datepicker();
        });
    </script>
}

This is a screenshot of the Datepicker working as intended in Chrome. Firefox and IE version 11 also work as expected.

This is a screenshot of the Datepicker in Edge, which is not working as expected or desired. Not only is it visually ugly, clicking any of the date values does not trigger any action.

I noticed, trying it again, that the Bootstrap datepicker appears for a fraction of a second and then gets overlapped by what you see in the Screenshot. It looks like Edge is slipping in its own datepicker.

[Looks fine to me.](https://jsfiddle.net/2vjLuw0d/) Sounds like you're making some other modifications to it. — Mike Cluck, Jun 27 '16 at 15:48
You mean the code looks fine? Because what I see in Edge doesn't look fine to me. — , Jun 27 '16 at 15:49
Really? Because I ran that in Edge and it looks fine on my machine. I'm running Edge v20.10240.16384.0. — Mike Cluck, Jun 27 '16 at 15:52
I added an update: it appears that Edge is slipping in its own datepicker over the Bootstrap datepicker. — , Jun 27 '16 at 15:53
The `type="date"` attribute is causing Edge to override the Bootstrap datepicker with its own. It seems to be a problem with how your project is converting the date picker model into HTML. Is there any way for you to disable that attribute in Razor? — meepzh, Jun 27 '16 at 15:58

Mike Cluck · Accepted Answer · 2016-06-27T16:24:06.547

The problem is that Edge has a default style and selector for date type inputs. That default style takes precedence over additional styling done through the plugin. Compare this one without the "date" type:

$('#DateCreditEarned').datepicker();

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css">
<script src="https://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>

<input id="DateCreditEarned" class="form-control" />

vs. this one which uses the "date" type:

$('#DateCreditEarned').datepicker();

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css">
<script src="https://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>

<input id="DateCreditEarned" type="date" class="form-control" />

To get around this, try setting the inputs type to something like "text". That way all control and styling is handled by the plugin instead of by Edge.

You can accomplish this in Razor with:

@Html.EditorFor(model => model.DateCreditEarned, new { 
    htmlAttributes = new { @type = "text", @class = "form-control" } 
})

That did the trick ``. I had hoped I could use `Html.EditorFor`, but somehow the Html Helper was still inserting "type=date" into the HTML. — , Jun 27 '16 at 16:22

How to use Bootstrap Datepicker with Microsoft Edge

1 Answers1