Bootstrap 显示空框的日期选择器

Question

我正在尝试使用 bootstrap 日期选择器来更新我网站中的图层日期。但是，我现在遇到的问题是，当我单击日期选择器框时，日历下拉列表根本不起作用并且 it just continues to display an empty box.

我正在尝试将日期选择器添加到 Leaflet 文本框控件中，并将 HTML 直接添加到 .innerHTML 方法中。下面是 Leaflet 文本框控件和日期选择器本身的代码。

L.Control.textbox = L.Control.extend({
    onAdd: function(map) {
        var info = L.DomUtil.create('div', 'datepicker');
        info.id = 'datePicker';
        //var content = getLayerTimes();
        //content = content.reverse();
        //var dropdown = prepareDropdown(content);
        //info.innerHTML = '<b>Time List</b> ' + dropdown;
        info.innerHTML += '<div class="container">';
        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); 

$('#datePicker').datepicker({
        format: 'yyyy-mm-dd',
        startDate: endDates.slice(0),
        endDate: endDates.slice(-1),
        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;
            }
        },
    });

其中 endDates 是我最终将作为日期选择器中唯一可选择的选项传入的日期列表。 endDates 是格式数组：

['2021-05-30', '2021-05-20', '2021-05-10'....]

在我所有的谷歌搜索中，我发现 css 和 js 文件在我的主 HTML 页面顶部的导入顺序会产生影响，所以为了清楚起见，脚本和 css 也在下面（我使用哈巴狗作为我的模板引擎）：

link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Jost&display=swap rel="stylesheet"')
link(rel='stylesheet', href='/stylesheets/bootstrap.min.css')
link(rel='stylesheet', href='/stylesheets/leaflet.css')
link(rel='stylesheet', href='/stylesheets/leaflet.timedimension.control.min.css')
link(rel='stylesheet', href='/stylesheets/leaflet-sidebar.css')
link(rel='stylesheet', href='/stylesheets/style.css')
link(rel='stylesheet', href='/stylesheets/bootstrap-datepicker.css')
      
script(src='/javascript/jquery-3.3.1.min.js')
script(src='/javascript/popper.min.js')
script(src='/javascript/bootstrap.min.js')
script(src="https://unpkg.com/rbush@2.0.1/rbush.min.js")
script(src="https://unpkg.com/labelgun@6.0.0/lib/labelgun.min.js")
script(src='/javascript/leaflet.js')
script(src='https://cdn.jsdelivr.net/npm/iso8601-js-period@0.2.1/iso8601.min.js')
script(src='/javascript/leaflet.timedimension.min.js')
script(src='/javascript/leaflet-sidebar.js')
script(async src="GOOGLE-TAG-LINK-HERE")
script(async src="GOOGLE-TAG-LINK-HERE")
script(async src="GOOGLE-TAG-LINK-HERE")
script(src='/javascript/bootstrap-datepicker.js')

Answer 1

解决这个问题的方法似乎是将日期选择器包装在 $(document).ready(function() { }) 类型的函数中。

所以上面的完整日期选择器函数变成：

$(document).ready(function() {
    $('#datePicker').datepicker({
        format: 'yyyy-mm-dd',
        startDate: endDates.slice(0),
        endDate: endDates.slice(-1),
        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;
            }
        },
    });
});

Bootstrap 显示空框的日期选择器

Bootstrap datepicker displaying empty box

javascript

bootstrap-4

leaflet

pug

bootstrap-datepicker