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'....]

在我所有的谷歌搜索中，我发现在我的主 HTML 页面顶部导入 css 和 js 文件的顺序可能会产生影响，所以为了清楚起见，脚本和 css 也在下面（我'我使用 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')

解决方法

解决这个问题的方法似乎是将日期选择器包装在 $(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;
            }
        },});
});