如何在 Microsoft Edge 中使用 Bootstrap Datepicker

Question

我在使用 Bootstrap Datepicker 时遇到问题，特别是 Edge。 Chrome、Firefox 和 Internet Explorer 11 版按预期工作，但 Edge 正在做一些非常奇怪和不受欢迎的事情。

我尝试使用 jQuery UI 日期选择器，但没有成功，所以我回滚到 Bootstrap。有什么方法可以让 Bootstrap 日期选择器与 Edge 一起使用吗？或者，是否有另一种有效的日期选择器技术？我真的希望不需要一些 hacky。

在我的 Razor 视图中（在 MVC Web 项目中）我有：

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

在视图的底部我有：

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

这是日期选择器在 Chrome 中按预期工作的屏幕截图。 Firefox 和 IE 版本 11 也可以正常工作。

这是 Edge 中日期选择器的屏幕截图，它没有按预期或预期工作。不仅外观难看，点击任何日期值都不会触发任何操作。

我注意到，再次尝试，Bootstrap 日期选择器出现了几分之一秒，然后与您在屏幕截图中看到的内容重叠。看起来 Edge 正在使用自己的日期选择器。

Answer 1

问题在于 Edge 有一个默认样式和选择器用于 date 类型输入。该默认样式优先于通过插件完成的其他样式。比较这个没有“日期”类型：

$('#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" />

对比这个使用“日期”类型：

$('#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" />

要解决此问题，请尝试将输入类型设置为 "text"。这样，所有控制和样式都由插件而不是 Edge 处理。

您可以在 Razor 中通过以下方式完成此操作：

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