Bootstrap DateRangePicker日历和右/左图标不显示

Question

我正在使用Bootstrap Date Range Picker，在此我无法获得Calendar和Left / Right Arrow glyphicon。

以下是我已实施的代码。

<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css" />

<!-- Include Date Range Picker -->
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

页面上的日期范围选择器代码：

<label style="padding-right:5px;">Select range: </label>    
  <h:inputText id="dateRangeFilterArchive" class="dateRangeArchive" style="width:200px;height:35px;vertical-align:center;text-align:center"/>
    <script type="text/javascript">
        $(document).ready(function() {
          $(function() {
            $('.dateRangeArchive').daterangepicker();
            });
        });
  </script>

然而，日历和左/右箭头的字形不会出现。

感谢任何帮助，

谢谢， Mufaddal。

Answer 1

可能您没有在代码中添加daterangepicker.js和daterangepicker.css

<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

Answer 2

编辑您的daterangepicker.js

查找此代码

html += '<th class="prev available"><i class="fa fa-arrow-left icon icon-arrow-left glyphicon glyphicon-arrow-left"></i></th>'

还有这个

html += '<th class="next available"><i class="fa fa-arrow-right icon icon-arrow-right glyphicon glyphicon-arrow-right"></i></th>'

像这样编辑

html += '<th class="prev available"><i class="glyphicon glyphicon-arrow-left"></i></th>'
.....
html += '<th class="next available"><i class="glyphicon glyphicon-arrow-right"></i></th>'

这对我有用