jquery - daterangepicker 年月难看

Question

我有以下 daterangepicker 代码。该代码正在运行，但是很难查看月、年和切换按钮。我使用的 Bootstrap 主题不适用于此。我一直在尝试弄清楚如何更改 CSS 以使月、年和切换按钮更易于查看。

我看到了什么

它应该是这样的

<!-- 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> 
<!-- Include Date Range Picker -->
<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" />


<form class="" action="{{ url_for('about') }}" name="Item_1" method="POST">
    <input style="width: 30%" type="text" name="daterange" value="01/01/2015 01/31/2015" />
    <button type="submit" class="btn btn-success">Submit</button>

    </form>



<script type="text/javascript">
$('input[name="daterange"]').daterangepicker(
{
    locale: {
      format: 'MM-DD-YYYY'
    },
    startDate: '01-01-2017',
    endDate: moment()
}, 
function(start, end, label) {
    console.log("A new date range was chosen: " + start.format('MM-DD-YYYY') + ' to ' + end.format('MM-DD-YYYY'));
});
</script>

Answer 1

因为评论有效，所以在此处将其标记为答案。 color css 属性控制字体颜色，包括字形的颜色。因此解决方法是将相应的表格元素和字形更改为使用 color: #000 或 color: black。

添加 !important 只是确保没有其他 CSS 文件改变颜色(除非它们也使用 !important 并且具有优先级，通过更具体的选择器或相同的选择器但出现在这条规则之后 - 这显然不是这里的情况)。

.calendar-table, .glyphicon-calendar {color: #000 !important;}