Set available dates dynamically in bootstrap datepicker

Question

I have a website which displays WMS data using Leaflet, and I've successfully set up a bootstrap datepicker where you can only select a date from an array of dates, using the beforeShowDay method.

I'm now trying to set up the datepicker so that when I change map layer on the website, the bootstrap datepicker will update its available dates from the newly updated list of layer dates (for the new layer). I've attempted to update the beforeShowDay function as in this answer and also tried to destroy and reinitialise the datepicker as seen here. Neither of these approaches worked.

Below is the code I'm using to set up the datepicker:

L.Control.textbox = L.Control.extend({
    onAdd: function(map) {
        var info = L.DomUtil.create('div', 'datepicker');
        info.id = 'datePicker';
        var startDates = getLayerTimes();
        prepareDatepicker(startDates);
        info.innerHTML += '<div class="container">';
        info.innerHTML += '<label for="datepicker"><b>Select Date</b></label>';
        info.innerHTML += '<input type="text" class="form-control" id="datepicker"">';
        info.innerHTML += '</div>';

        return(info);
    }
});

L.control.textbox = function(opts) { return new L.Control.textbox(opts);}
map.removeControl(map.zoomControl); 
L.control.textbox({ position: 'topleft'}).addTo(map);
map.addControl(map.zoomControl); 

function prepareDatepicker (startDates) {
    if (mapLayer.options.layers.includes('Modis')) {
        var endDates = startDates.map(x => addDays(x));
    } else {
        var endDates = startDates.map(x => addMonth(x));
    };   
    $(document).ready(function() {
        $('#datepicker').datepicker({
            format: 'yyyy-mm-dd',
            startDate: endDates[0],
            endDate: endDates.slice(-1)[0],
            autoclose: true,
            // enable or disable dates according to whether they are listed
            beforeShowDay: function(date){
                tdate = date.getFullYear() + '-' + (('0'+(date.getMonth()+1)).slice(-2)) + '-' + (('0'+date.getDate()).slice(-2))
                if (endDates.includes(tdate)){
                    return true;
                }
                else {
                    return false;
                }
            },
        }).on('changeDate', function (e) {
            endDate = convertBack(e.date);
            updateMapLayer(mapLayer.options.layers, mapLayer.options.style, endDate);            
        });
    });

When a layer change event happens, it then runs the below function to attempt to "refresh" the datepicker:

function refreshLayerTimes(startDate) {
    startDates = getLayerTimes();
    if (mapLayer.options.layers.includes('Modis')) {
        endDates = startDates.map(x => addDays(x));
    } else {
        endDates = startDates.map(x => addMonth(x));
    };
    $('#datepicker').datepicker({ beforeShowDay: endDates});
    return startDates, endDates;
};

where endDates is an array of form: ["2021-05-31", "2021-05-20", "2021-05-10",....]

Any help with this would be much appreciated.

Answer 1

There are two approaches you can take here :

Approach 1 : //remove your current dateTimePicker and re-initialize it with the new date range

     $("#datetime").datetimepicker("remove");
     $('#datepicker').datepicker({
           format: 'yyyy-mm-dd',
           startDate: endDates[0],
           endDate: endDates.slice(-1)[0],
           autoclose: true,
           // enable or disable dates according to whether they are listed
           beforeShowDay: function(date){
               tdate = date.getFullYear() + '-' + (('0'+(date.getMonth()+1)).slice(-2)) + '-' + (('0'+date.getDate()).slice(-2))
               if (endDates.includes(tdate)){
                   return true;
               }
               else {
                   return false;
               }
           },
       }).on('changeDate', function (e) {
           endDate = convertBack(e.date);
           updateMapLayer(mapLayer.options.layers, mapLayer.options.style, endDate);            
       });

Approach 2: set new start and end dates using the below methods

$('#datetimepicker').datetimepicker('setStartDate', '2012-01-01');
$('#datetimepicker').datetimepicker('setEndDate', '2012-01-01');

You can check out all the methods allowed in bootstrap datetimepicker in this doc: https://www.malot.fr/bootstrap-datetimepicker/