javascript - How to use Bootstrap Datepicker with Microsoft Edge - Stack Overflow

admin管理员组

文章数量:1406924

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.

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.

• javascript
• jquery
• css
• twitter-bootstrap
• datepicker

Share Improve this question Follow edited Jun 27, 2016 at 15:55 asked Jun 27, 2016 at 15:43 user4864716user4864716 5

• Looks fine to me. Sounds like you're making some other modifications to it. – Mike Cluck Commented Jun 27, 2016 at 15:48
• You mean the code looks fine? Because what I see in Edge doesn't look fine to me. – user4864716 Commented Jun 27, 2016 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 Commented Jun 27, 2016 at 15:52
• I added an update: it appears that Edge is slipping in its own datepicker over the Bootstrap datepicker. – user4864716 Commented Jun 27, 2016 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 Commented Jun 27, 2016 at 15:58

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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./jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn./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./jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn./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 acplish this in Razor with:

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

本文标签： javascriptHow to use Bootstrap Datepicker with Microsoft EdgeStack Overflow