引导日期选择器显示空框答案

【问题标题】：Bootstrap datepicker displaying empty box引导日期选择器显示空框
【发布时间】：2021-06-08 11:08:25
【问题描述】：

我正在尝试使用引导日期选择器来更新我网站中的图层日期。但是，我目前遇到的问题是，当我单击日期选择器框时，日历下拉菜单根本不起作用，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'....]

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

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')

【问题讨论】：

可能是 jquery 已经包含在 bootstrap js 中了。尝试检查，如果是，请使用不带 jquery 的 bootstrap 版本
我检查了安装的版本 - 它似乎是 v4.0.0，我不认为 jquery 与它捆绑在一起，因为 bootstrap.min.js 的顶部说它需要 jQuery。

标签： javascript bootstrap-4 leaflet pug bootstrap-datepicker

【解决方案1】：

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

所以上面完整的 datepicker 函数变成了：

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

【讨论】：