daterangepicker難以查看月份和年份

我有以下daterangepicker代碼。該代碼正在運行，但月份，年份和切換按鈕很難查看。我使用的引導主題與此無法正常工作。我一直在試圖弄清楚如何改變CSS，使月份，年份和切換按鈕更具可視性。daterangepicker難以查看月份和年份

我所看到的

這是它應該是什麼樣子

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

來源

2017-10-13 Matt

如果你做'.calendar-table，.glyphicon-calendar {color：＃000！important;}'這樣的事情嗎？如果是這樣，它看起來就像這些元素的'color'屬性，但我會建議使用開發工具來確定現有的CSS規則將它們改爲更淺的顏色，並將更淺的顏色更改爲黑色，而不是使用' ！important'。從您的代碼示例中，它沒有出現任何將其更改爲淺色的任何內容 - 您是否在同一個文件中嵌入了CSS，或者是否拉出了另一個樣式表？ –

這實際上是劑量工作。非常感謝你。 – Matt

在這裏將其標記爲一個答案，因爲註釋工作。「css」屬性控制字體顏色，包括glyphicons的字體顏色。所以修復方法是更改相應的表格元素和圖形以使用color: #000或color: black。

添加!important只是確保沒有其他的CSS文件改變顏色（除非他們使用!important過，並有優先權，通過任何更具體的選擇，或者相同的選擇，但是這個規則之後出現 - 這顯然不是這裏的情況）。

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

來源

2017-10-13 23:35:56

daterangepicker難以查看月份和年份

回答

相關問題