Rubix_Revenge Rubix_Revenge - 5 months ago 366
CSS Question

How to use Bootstrap Datepicker with Microsoft Edge

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.

Bootstrap Datepicker using Chrome

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.

Bootstrap Datepicker using Edge

Answer

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" } 
})
Comments