I have bootstrap date picker inside table with hover option. When going into date picker first two rows that are displaying month and day are overwritten by css from table and after hover side text is going white.
Here is 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/[email protected]/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:
How to change css or js to disable hover on first two rows in date picker?
add this css to your stylesheet