I have a bootstrap date picker inside a table with the hover option. When accessing the date picker, the first two rows displaying the month and day are being overridden by CSS from the table, and after hovering, the side text turns white.
Here is a working example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- menu font awesome css -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
<!-- jquery -->
<script src="https://unpkg.com/jquery/dist/jquery.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- momentum -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<!-- bootstrap 4 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' rel='stylesheet' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet"/>
</head>
<style>
.input-group {
max-width: 200px;
}
.label_column {
width: 30%;
}
.table > tbody > tr > td {
vertical-align: middle;
}
.status {
color: LawnGreen;
font-size: 15px;
}
.bootstrap-datetimepicker-widget.dropdown-menu {
width: 300px;
height: 300px;
}
.datepicker table tr td {
border-radius: 0%;
border:dotted 1px black;
background-color: SkyBlue;
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
color: black;
}
.datepicker thead tr th:hover {
color: black;
}
</style>
<body>
<table class="table table-sm table-hover table-borderless table-dark">
<tbody>
<tr>
<td>
<div class="form-group">
<div class="input-group date" id="date_time_picker_csd" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#date_time_picker_csd"
name="signing_date" required/>
<div class="input-group-append" data-target="#date_time_picker_csd" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar-alt"></i></div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(function () {
$('.input-group').datetimepicker({
format: 'YYYY-MM-DD',
});
});
</script>
</body>
</html>Question:
Is there a way to modify the CSS or JavaScript to disable hover effects on the first two rows of the date picker?