I'm using Eonasdan bootstrap date/timepicker from http://eonasdan.github.io/bootstrap-datetimepicker. I have the assessment to add trip prices for each day in table cells below date based on JSON file got from AJAX request. The problem is that the data is loaded again in DOM for each month when I am navigating with left and right arrow, actually entire data for months is not loaded, but only the data for the month that is selected based on navigation(left right arrow). Based on this I don't know how to fill data, can I maybe modified the original Eonasdan script, or should I do it externally in my file. Can someone help?
My datetime picker looks like this in 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'
}
});
My html looks like this:
<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>
And the format of json file is as following where the price is key minimal_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"}]