在 bootstrap 日期选择器中动态设置可用日期

Question

我有一个使用 Leaflet 显示 WMS 数据的网站，我已经成功地设置了一个 bootstrap 日期选择器，您只能 select 来自日期数组的日期，使用 beforeShowDay方法。

我现在正在尝试设置日期选择器，这样当我在网站上更改地图图层时，bootstrap 日期选择器将从最新更新的图层日期列表中更新其可用日期（对于新层）。我试图更新 beforeShowDay 函数 as in this answer and also tried to destroy and reinitialise the datepicker as seen here。这些方法都不起作用。

下面是我用来设置日期选择器的代码：

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);            
        });
    });

当图层更改事件发生时，它会运行以下函数来尝试“刷新”日期选择器：

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;
};

其中 endDates 是一个数组形式：["2021-05-31", "2021-05-20", "2021-05-10",....]

如有任何帮助，我们将不胜感激。

Answer 1

您可以在此处采用两种方法：

方法一： //删除当前的 dateTimePicker 并用新日期重新初始化它范围

     $("#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);            
       });

方法二：使用以下方法设置新的开始和结束日期

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

您可以在本文档中查看 bootstrap datetimepicker 中允许的所有方法：https://www.malot.fr/bootstrap-datetimepicker/

在 bootstrap 日期选择器中动态设置可用日期

Set available dates dynamically in bootstrap datepicker

javascript

jquery

bootstrap-4

leaflet

bootstrap-datepicker