When I open a bootstrap modal I get the data of previous months or years I tried to filter some data with, with this data some months or years are already selected in my datepicker. When I want to add some more months or years to the datepicker it adds the selected months or years in the textfield of the datepicker.

This also happens when I select the previously selected month or year, I would like to prevent this from happening, so I set the immediateUpdates option to true when I initialize the datepicker. This fixed my problem mentioned above, but now a new problem arises.

When I open the datepicker and select a month or year it now clears my previous values but I'm unable to select new months or years in the selectpicker when I click on them. They are only selectable through the arrow keys and enter key on my keyboard, this won't do and I'm kinda runnning out of ideas on how to fix this.

Beneath this is my HTML and JS code I use to create the datepicker.

HTML:

<input type="text" class="form-control" name="selected_years[]" placeholder="select years" id="years_datepicker" autocomplete="off"/> 

<input type="text" class="form-control" name="selected_months[]" placeholder="select months" id="month_datepicker" autocomplete="off"/>

JS:

function initDatePicker(datePicker, format) {
    let DatePicker = $(datePicker);

    let datepickerFormat = "";
    let datepickerView = "";

    if (format === "yearPicker") {
        datepickerFormat = "yyyy";
        datepickerView = "years";
    } else if (format === "monthPicker") {
        datepickerFormat = "mm-yyyy";
        datepickerView = "months";
    }

    DatePicker.datepicker({
        language: local_language,
        format: datepickerFormat,
        startView: datepickerView,
        minViewMode: datepickerView,
        maxViewMode: datepickerView,
        multidate: true,
        multidateSeparator: ", ",
        todayHighlight: true,
        startDate: start_of_reports,
        endDate: end_of_reports,
        disableTouchKeyboard: true,
        immediateUpdates: true
    });
}