I am currently working on implementing a bootstrap datepicker to update layer dates on my website. However, I am facing an issue where the calendar dropdown does not appear when I click on the datepicker box and instead it just shows an empty box.
My goal is to integrate the datepicker within a Leaflet textbox control and insert the HTML directly using the .innerHTML method. Below is the code for the Leaflet textbox control and the datepicker itself.
L.Control.textbox = L.Control.extend({
// Code omitted for brevity
});
L.control.textbox = function(opts) { return new L.Control.textbox(opts);}
// Code omitted for brevity
$('#datePicker').datepicker({
format: 'yyyy-mm-dd',
startDate: endDates.slice(0),
endDate: endDates.slice(-1),
autoclose: true,
// Code omitted for brevity
});
Where endDates represents a list of selectable dates for the datepicker in the format:
['2021-05-30', '2021-05-20', '2021-05-10'....]In my research, I have discovered that the order in which CSS and JS files are imported at the beginning of my main HTML page can impact the functionality. Therefore, I have included the scripts and CSS below (using pug as my templating engine):
link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Jost&display=swap rel="stylesheet"')
// CSS links omitted for brevity
script(src='/javascript/jquery-3.3.1.min.js')
// JS script links omitted for brevity
script(src='/javascript/bootstrap-datepicker.js')