如何在 Microsoft Edge 中使用 Bootstrap Datepicker
Posted
技术标签:
【中文标题】如何在 Microsoft Edge 中使用 Bootstrap Datepicker【英文标题】:How to use Bootstrap Datepicker with Microsoft Edge 【发布时间】:2016-10-29 17:07:20 【问题描述】:我在使用 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 正在使用自己的日期选择器。
【问题讨论】:
Looks fine to me. 听起来您正在对其进行一些其他修改。 你的意思是代码看起来不错?因为我在 Edge 中看到的内容对我来说看起来不太好。 真的吗?因为我在 Edge 中运行它,它在我的机器上看起来不错。我正在运行 Edge v20.10240.16384.0。 我添加了一个更新:Edge 似乎在自己的日期选择器中滑过 Bootstrap 日期选择器。type="date"
属性导致 Edge 用它自己的覆盖 Bootstrap 日期选择器。您的项目如何将日期选择器模型转换为 HTML 似乎是一个问题。有什么方法可以让你在 Razor 中禁用该属性?
【参考方案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"
)
【讨论】:
成功了<input id="DateCreditEarned" class="form-control" />
。我曾希望我可以使用Html.EditorFor
,但不知何故,Html Helper 仍在 HTML 中插入“type=date”。
css 和 javascripts 链接不起作用。以上是关于如何在 Microsoft Edge 中使用 Bootstrap Datepicker的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 CSS 定位 Microsoft Edge? [复制]