0

我正在使用 Bootstrap 日期范围选择器，在此我无法获取日历和左/右箭头字形图标。

下面是我已经实现的代码。

<!-- 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>

但是，日历和左/右箭头的字形图标不会出现。

日历的字形图标和左？右箭头不出现

任何帮助表示赞赏，

谢谢，穆法达尔。

4

2 回答 2

0

编辑您的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>'

这对我有用

于 2018-11-24T13:04:04.207 回答
0

可能您没有在代码中添加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" />
于 2016-07-22T10:57:38.523 回答