I decided to implement the bootstrap datetimepicker using this gem and utilized the following HTML code:
<div id="custom-dates" style=" clear:both;">
<div class="container">
<div class="row">
<div class='col-md-3 col-xs-3'>
<div class="form-group">
<b>From:</b>
<div class='input-group date' id='datetimepicker6'>
<input type='text" class="form-control" style="margin: 0px !important;" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-3 col-xs-3'>
<div class="form-group">
<b>To:</b>
<div class='input-group date' id='datetimepicker7'>
<input type='text' class="form-control" style="margin: 0px !important;"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar" style="top:0;">
</span>
</span>
</div>
</div>
</div>
You can see the same behavior demonstrated on this link: . Although the dropdown functions correctly, I encountered an issue with the up and down arrow buttons that are meant to increase or decrease the minute and hour values. These arrows do not show up due to a color similarity with the background. When hovered over, the area around them turns grey, making the white arrows visible. Interestingly, the icons in the provided link display properly. How can I resolve this?
I am unable to capture a screenshot while hovering as the dropdown disappears. Additionally, inspecting the element is challenging since clicking on it hides the widget. Any guidance on how I can successfully inspect the element would be greatly appreciated.