如何在Microsoft Edge中使用Bootstrap日期选择器

Question

如何在Microsoft Edge中使用Bootstrap日期选择器

javascriptjquerycsstwitter-bootstrapdatepicker

4

我在使用Bootstrap日期选择器时遇到了问题，尤其是在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中Datepicker正常工作的截图。Firefox和IE 11版本也符合预期。

这是Edge中Datepicker的屏幕截图，它的表现不如预期或期望。它不仅视觉上很丑陋，而且点击任何日期值都不会触发任何操作。

我注意到，在再次尝试时，Bootstrap Datepicker出现了一小段时间，然后被屏幕截图中看到的内容覆盖。看起来Edge正在插入它自己的日期选择器。

- user4864716

“我觉得看起来没问题。”（https://jsfiddle.net/2vjLuw0d/）“听起来你正在对它进行其他修改。” - Mike Cluck

你的意思是代码看起来没问题吗？因为我在Edge中看到的不太对劲。 - user4864716

真的吗？因为我在Edge上运行了它，我的机器上看起来很好。我正在运行Edge v20.10240.16384.0。 - Mike Cluck

我添加了一个更新：看起来Edge正在覆盖Bootstrap日期选择器。 - user4864716

type="date" 属性导致 Edge 浏览器覆盖了 Bootstrap 日期选择器。这似乎是由于您的项目将日期选择器模型转换为 HTML 的方式存在问题。您是否有办法在 Razor 中禁用该属性？ - meepzh

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mike Cluck · Accepted Answer

问题在于Edge浏览器默认给date类型的输入框添加样式和选择器，这种默认样式会覆盖插件额外添加的样式。对比一下没有"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" />

与这个使用"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" type="date" class="form-control" />

为了解决这个问题，尝试将输入类型设置为类似于"text"的内容。这样，所有控制和样式都由插件而不是Edge处理。

您可以通过以下Razor代码实现此目的：

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