我正在使用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>
但是,日历和左/右箭头的字形不会出现。
任何帮助表示赞赏,
谢谢,穆法达尔。
可能你没有在你的代码中添加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" />
编辑你的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>'
这对我有用