I have a Django template in which I use bootstrap-datepicker-plus. However, I made a form in which the user can click a button in order to display as many datetime fields as needed.
The issue I'm encountering is that bootstrap-datetime-picker only loads the datetime fields present when the page charges, but if I want to add new datetime fields, then those are not loaded. After searching in the source code, I found out that it indeed was only loading the fields when the page is ready but doesn't look for other datetime fields after that.
I tried some things and saw that by reimporting the js file with
<script src="/static/bootstrap_datepicker_plus/js/datepicker-widget.js"></script>
each time I make a change it's working, but I can't do that for each situation, and I guess that's not really a good practice.
Is there a way to like refresh the bootstrap-datetime-picker's js file each time I create a new datetime field ?
I don't know if that's useful, but here's bootstrap-datetime-picker's js file that loads the datetime pickers :
(function (factory) {
if (typeof define === 'function' && define.amd)
define(['jquery'], factory)
else if (typeof module === 'object' && module.exports)
module.exports = factory(require('jquery'))
else
factory(jQuery)
}(function ($) {
var datepickerDict = {};
const bootstrapVersion = (window.bootstrap?.Collapse||$.fn.collapse.Constructor).VERSION;
var isBootstrap4 = bootstrapVersion.split('.').shift() === "4";
var isBootstrap5 = bootstrapVersion.split('.').shift() === "5";
function fixMonthEndDate(e, picker) {
e.date && picker.val().length && picker.val(e.date.endOf('month').format('YYYY-MM-DD'));
}
function initOnePicker(element, options) {
var $element = $(element), data = {};
try {
data = JSON.parse($element.attr('data-dp-config'));
}
catch (x) { }
$.extend(1, data.options, options);
if (data.id && data.options) {
data.$element = $element.datetimepicker(data.options);
data.datepickerdata = $element.data("DateTimePicker");
data.$element.next('.input-group-addon').on('click', function() {
data.datepickerdata.show();
});
if (isBootstrap4 || isBootstrap5) {
data.$element.on("dp.show", function(e) {
$('.collapse.in').addClass('show');
});
}
}
return data;
};
function initLinkedPickers(to_picker) {
var from_picker = datepickerDict[to_picker.linked_to];
from_picker.datepickerdata.maxDate(to_picker.datepickerdata.date() || false);
to_picker.datepickerdata.minDate(from_picker.datepickerdata.date() || false);
from_picker.$element.on("dp.change", function (e) {
to_picker.datepickerdata.minDate(e.date || false);
});
to_picker.$element.on("dp.change", function (e) {
if (to_picker.picker_type == 'MONTH') fixMonthEndDate(e, to_picker.$element);
from_picker.datepickerdata.maxDate(e.date || false);
});
if (to_picker.picker_type == 'MONTH') {
to_picker.$element.on("dp.hide", function (e) {
fixMonthEndDate(e, to_picker.$element);
});
fixMonthEndDate({ date: to_picker.datepickerdata.date() }, to_picker.$element);
}
};
$.fn.djangoDatetimePicker = function(options){
options = options || {};
var newPickers = {};
$.each(this, function (i, element) {
var picker = initOnePicker($(element), options);
newPickers[picker.id] = picker;
});
$.extend(datepickerDict, newPickers);
$.each(newPickers, function (i, picker) {
if (picker.linked_to)
initLinkedPickers(picker);
});
return this;
}
$(function(){
$("[data-dp-config]:not([disabled])").djangoDatetimePicker();
if (isBootstrap4 || isBootstrap5) {
$('body').on('show.bs.collapse','.bootstrap-datetimepicker-widget .collapse',function(e){
$(e.target).addClass('in');
});
$('body').on('hidden.bs.collapse','.bootstrap-datetimepicker-widget .collapse',function(e){
$(e.target).removeClass('in');
});
}
if(isBootstrap5){
$('.input-group-addon[data-target="#datetimepicker1"]').each(function (){
$(this).attr('data-bs-target','#datetimepicker1').removeAttr('data-target')
$(this).attr('data-bs-toggle','datetimepickerv').removeAttr('data-toggle')
})
}
});
}));