Cuando abro un modal de arranque, obtengo los datos de meses o años anteriores con los que traté de filtrar algunos datos, con estos datos, algunos meses o años ya están seleccionados en mi selector de fechas. Cuando quiero agregar algunos meses o años más al selector de fechas, agrega los meses o años seleccionados en el campo de texto del selector de fechas.

Esto también sucede cuando selecciono el mes o año previamente seleccionado, me gustaría evitar que esto suceda, así que configuro la opción de actualizaciones inmediatas en verdadero cuando inicializo el selector de fechas. Esto solucionó mi problema mencionado anteriormente, pero ahora surge un nuevo problema.

Cuando abro el selector de fechas y selecciono un mes o un año, ahora borra mis valores anteriores, pero no puedo seleccionar nuevos meses o años en el selector de selección cuando hago clic en ellos. Solo se pueden seleccionar a través de las teclas de flecha y la tecla Intro en mi teclado, esto no funcionará y me estoy quedando sin ideas sobre cómo solucionarlo.

Debajo de esto está mi código HTML y JS que uso para crear el selector de fechas.

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 }); }