I am currently using a daterangepicker code that is fully functional. However, I am facing an issue with the visibility of the Month, Year and toggle buttons. The bootstrap theme I am using does not complement these elements well, making them hard to view. I have been attempting to modify the CSS in order to enhance the visibility of the month, year, and toggle buttons.
Current Appearance: https://i.sstatic.net/aDqum.png
Desired Appearance: https://i.sstatic.net/OHn90.png
<!-- 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>
<!-- 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>