My code is here: https://jsfiddle.net/epg8rn65/
Problem Summary:
Clicking Month/Year in the datepickers, should open a <select> style option menu to choose a new month/year. This works on Chrome/Safari, but not on Firefox.
Problem Description: The following problem exists on Firefox, but it doesn't exist on Chrome or Safari: If you run the snippet I've posted to jsfiddle above, and click the button labelled 'Open OffCanvas', a bootstrap offcanvas pane will appear from the left.
Inside this there are two datepicker tools. First one is datatables DateTime extension Second one is JQueryUI Datepicker
For each of these tools; If you click on the input boxes, these datepicker will appear. However, if you try to click the Month or the Year, at the top of either of these date pickers, they won't display the selection options in Firefox. They display just fine in Chrome/Safari.
I'm a bit lost as to where the problem is coming from.
I have tried modifying the z-index of my option and select classes, but this has failed me so far. I've also tried to add a javascript function that will reinitialize the datepickers, when the offcanvas is toggled, but again - this got me nowhere.
Maybe I'm looking at this wrong.
// Bootstrap DateTime
var minDate;
$(document).ready( function () {
minDate = new DateTime($('#start_date'), {
format: 'YYYY-MM-DD',
firstDay: 0,
buttons: {
today: true,
},
});
});
// JQuery Datepicker
$( function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true
});
});<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Datepicker Fails</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.1.1/css/dataTables.dateTime.min.css">
</head>
<body>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
Open OffCanvas
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="card-body">
<!-- Date Selectors -->
<br/>
<b>* Bootstrap DateTime:</b>
<div class="filterbox">
<input type="text" id="start_date" name="start" class="form-control input-sm" placeholder="" aria-label="start-search" value="">
</div>
<br/>
<b>* JQuery Datepicker</b>
<p>Date: <input type="text" id="datepicker"></p>
<br/>
<b>* Regular Select</b><br/>
<select>
<option value="abc">abc</option>
<option value="def">def</option>
<option value="ghi">ghi</option>
</select>
</div>
</div>
</div>
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/datetime/1.1.1/js/dataTables.dateTime.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</body>
</html>