javascript - 在 bootstrap-datetimepicker 中为每个单元格添加一天的价格

Question

我正在使用来自http://eonasdan.github.io/bootstrap-datetimepicker的 Eonasdan 引导日期/时间选择器。我有评估根据从 AJAX 请求获得的 JSON 文件在日期下方的表格单元格中添加每天的行程价格。问题是当我使用左右箭头导航时，每个月的数据都会在 DOM 中再次加载，实际上几个月的整个数据都没有加载，而只有基于导航选择的月份的数据（左右箭头）。基于此，我不知道如何填充数据，我可以修改原始的 Eonasdan 脚本，还是应该在我的文件外部进行。有人可以帮忙吗？

我的日期时间选择器在 Jquery 中看起来像这样：

       const date = new Date();
       date.setDate(date.getDate());
            $('#datepicker').datetimepicker({
                minDate : date,
                maxDate: '2019-12-31',
                format: 'DD.MM.YYYY',
                keepOpen: true,
                inline: true,
                debug: true,
                icons:{
                    date: 'fa fa-calendar',
                    up: 'fa fa-chevron-up',
                    down: 'fa fa-chevron-down',
                    previous: 'fa fa-angle-left',
                    next: 'fa fa-angle-right',
                    today: 'fa fa-screenshot',
                    clear: 'fa fa-trash',
                    close: 'fa fa-remove'
                }
     });

我的 html 看起来像这样：

    <input  id="datepicker" type="text" name="date" class="form-control input-md">
    <div class="input-group-addon dt-cal">
        <span class="fa fa-calendar"></span>
    </div>
</div>

json文件的格式如下，其中price为key minimum_price：

{"tour_id":9,"date_of_departure":"20.06.2019","minimal_price":"0","status_id":0,"status":"Inactive","discount":"NO"},
{"tour_id":9,"date_of_departure":"21.06.2019","minimal_price":"0","status_id":0,"status":"Inactive","discount":"NO"},
{"tour_id":9,"date_of_departure":"22.06.2019","minimal_price":"39.00","status_id":1,"status":"Active","discount":"YES"},
{"tour_id":9,"date_of_departure":"23.06.2019","minimal_price":"0","status_id":0,"status":"Inactive","discount":"NO"},
{"tour_id":9,"date_of_departure":"24.06.2019","minimal_price":"39.00","status_id":1,"status":"Active","discount":"YES"}]

标签： javascriptjqueryhtmlbootstrap-datepicker