Bootstrap 3.0.0 打破了日期选择器图标

Posted 2023-05-07

【中文标题】Bootstrap 3.0.0 打破了日期选择器图标

【英文标题】：Bootstrap 3.0.0 breaks the datepicker icon

【发布时间】：2013-08-14 08:54:45

【问题描述】：

这里是Demo

如果您使用 2.3.1，取消注释第 12 行，您将看到按钮正确显示

有谁知道我该如何修复 3.0.0-rc1 版本？

【问题讨论】：

不要浪费时间了，你需要迁移到版本 3 并将路径更改为 glyps...。最好使用这样的东西 -> mugifly.github.io/jquery-simple-datetimepicker/…

我添加了“~/Content/bootstrap.css”，它成功了！

【参考方案1】：

要修复 bootstrap 3.0 的 bootstrap-datepicker 中的图标问题，请执行以下操作：

// ../bootstrap-datepicker.js

搜索下一个内容并替换

替换<i class="icon-arrow-left"/>

<i class="glyphicon glyphicon-arrow-left"/>

替换<i class="icon-arrow-right"/>

<i class="glyphicon glyphicon-arrow-right"/>

替换.toggleClass('icon-arrow-left icon-arrow-right');

.toggleClass('glyphicon-arrow-left glyphicon-arrow-right');

就是这样，我希望它对你有用。

【讨论】：

如果你想使用 font awesome 代替 glyphicons：将 html 中的类的 icon-arrow-left 更改为 fa fa-arrow-left 和 icon-arrow-right 更改为 fa fa-arrow-right，并将 fa-arrow-left fa-arrow-right 放在 @ 987654332@电话。

【参考方案2】：

UPADTE

下面的答案对于 Bootstrap 3 Release Candidates 是正确的，但是稳定版本确实包含 Glyphicons 库，它需要一个基类和一个单独的图标类，例如：

<span class="glyphicon glyphicon-calendar"></span>

原答案：

来自文档：

随着 Bootstrap 3 的推出，图标已移至 separate repository。这保持 尽可能精简的主要项目，使人们更容易 交换图标库，并使 Glyphicons 图标字体更容易 可供 Bootstrap 之外的更多人使用。

这意味着您需要单独包含字形图标，您可以使用Bootstrap's own icons 或其他库，如Font Awesome

【参考方案3】：

看起来.icon-calendar 在 3.0.0-rc1 中不存在。

2.3.1 css

3.0.0-rc1 css

3.0.0-rc1 CSS 中提到的唯一图标似乎与导航有关。看起来他们可能已将其重命名为 .glyphicon-calendar。

【参考方案4】：

因此，我更喜欢添加另一个用于 Bootstrap V2 和 V3 的作品。

<tr>'+
    '<th class="prev">'+
        '<i class="icon-arrow-left"/>'+                 
        '<i class="glyphicon glyphicon-arrow-left"/>'+ //Añadido para solucionar el bug con BS3
    '</th>'+
    '<th colspan="5" class="switch"></th>'+
    '<th class="next">'+
        '<i class="icon-arrow-right"/>'+
        '<i class="glyphicon glyphicon-arrow-right"/>'+ //Añadido para solucionar el bug con BS3
    '</th>'+
'</tr>'+ 

【讨论】：

我已经在具有相同日期选择器库的不同项目中使用 BS2 和 BS3 并且以这种方式工作，也许这是一个不好的做法，但触摸核心库总是一个不好的做法，不是吗?

【参考方案5】：

我认为最好的方法是：

<script type="text/javascript">
      $(document).ready(function()
        $('#ge_eventbundle_event_eventDate').datetimepicker(
              language: "fr", 
              format: "yyyy-mm-dd  hh:ii",
              autoclose: true,
              todayBtn: true,
              fontAwesome: 'font-awesome',
        );
    );
</script>

【参考方案6】：

在 bootstrap-datetimepicker.js 中找到以下行

this.fontAwesome = j.fontAwesome || this.element.data("font-awesome") || false;

用这个替换

this.fontAwesome = j.fontAwesome || this.element.data("font-awesome") || true;

【参考方案7】：

在您的 bootstrap-datetimepicker.js 上打开它并更改以下内容

this.icons = 
  leftArrow: this.fontAwesome ? 'fa-arrow-left' : (this.bootcssVer === 3 ? 'glyphicon-arrow-left' : 'icon-arrow-left'),
  rightArrow: this.fontAwesome ? 'fa-arrow-right' : (this.bootcssVer === 3 ? 'glyphicon-arrow-right' : 'icon-arrow-right')

this.icontype = this.fontAwesome ? 'fa' : 'glyphicon';

到下面

this.icons = 
  leftArrow: this.fontAwesome ? 'fa-arrow-left' : (this.bootcssVer === 3 ? 'fa-arrow-left' : 'fa-arrow-left'),
  rightArrow: this.fontAwesome ? 'fa-arrow-right' : (this.bootcssVer === 3 ? 'fa-arrow-right' : 'fa-arrow-right')

this.icontype = this.fontAwesome ? 'fa' : 'fa';

试试这个方法看看

【讨论】：

很遗憾，文件bootstrap-datetimepicker.js 不包含这样的行。