如何在Microsoft Edge中使用Bootstrap Datepicker

user4864716 发表于 Dev

用户名

我在使用Bootstrap Datepicker（特别是Edge）时遇到了麻烦。Chrome，Firefox和Internet Explorer 11版可以正常工作，但是Edge确实做了一些奇怪且不希望的事情。

我尝试使用jQuery UI datepicker，但没有成功，所以我回滚到Bootstrap。有什么方法可以使Bootstrap datepicker与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>
}

这是Datepicker在Chrome中正常工作的屏幕截图。Firefox和IE 11版也可以正常工作。

这是Edge中Datepicker的屏幕截图，无法正常运行。单击任何日期值不仅不美观，而且不会触发任何操作。

我注意到，再试一次，Bootstrap日期选择器会出现一秒钟的时间，然后与您在屏幕截图中看到的内容重叠。看起来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" } 
})

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-03-3

我来说两句

0条评论

登录后参与评论

上一篇：如何自动为MySQL中的每个新连接调用查询？

来自分类Dev