gpt4 book ai didi

javascript - 如何在 Microsoft Edge 中使用 Bootstrap Datepicker

转载 作者:塔克拉玛干 更新时间:2023-11-02 20:42:49 26 4
gpt4 key购买 nike

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

我尝试使用 jQuery UI 日期选择器但没有成功,所以我回滚到 Bootstrap。有没有办法让 Bootstrap 日期选择器与 Edge 一起工作?或者,是否有另一种有效的日期选择器技术?我真的希望不需要一些骇人听闻的东西。

在我的 Razor View 中(在 MVC 网络元素中)我有:

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

在 View 的底部我有:

@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 也可以按预期工作。

Bootstrap Datepicker using Chrome

这是 Edge 中日期选择器的屏幕截图,它没有按预期或期望的方式工作。它不仅在视觉上很丑陋,而且单击任何日期值都不会触发任何操作。

我注意到,再试一次,Bootstrap 日期选择器出现了几分之一秒,然后与您在屏幕截图中看到的内容重叠。 Edge 似乎在自己的日期选择器中出现了问题。

Bootstrap Datepicker using Edge

最佳答案

问题是 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" }
})

关于javascript - 如何在 Microsoft Edge 中使用 Bootstrap Datepicker,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38058124/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com