air-datepicker. Почему в разметку добавляется два календаря?

Есть компонент air-datepicker в который я добавляю кнопку "применить"

mixin date-picker()
  .date-picker(id='date-picker' type='text')
import './date-picker.scss';
import 'air-datepicker/dist/js/datepicker.min.js';

$('.date-picker').datepicker({
  range: true,
  multipleDatesSeparator: ' - ',
  clearButton: true,
  navTitles: {
    days: 'MM <i>yyyy</i>',
  },

  onSelect: function (fd, d, picker) {
    $('#startDate').val(fd.split(' - ')[0]);
    $('#endDate').val(fd.split(' - ')[1]);
  },
});

$(function () {
  addApplyButton();

  let $applyButton = $('[data-action="apply"]');
  $applyButton.on('click', hideDatePicker);
});

function addApplyButton() {
  let $isPickerButtons = $('.date-picker').find('.datepicker--buttons');
  if ($isPickerButtons) {
    $isPickerButtons.append(
      '<span class="datepicker--button" data-action="apply">Применить</span>'
    );
  }
}

function hideDatePicker() {
  let $isDatePicker = $('.dropdown-date__date-picker');
  $isDatePicker.css('display', 'none');
}

Также есть несколько страниц на которых этот календарь привязан к инпутам (миксин ниже) и на всех этих страницах, кроме одной он выводится по клику в единственном экземпляре. А на этой почему-то при клике на кнопку он выводится дважды один под другим (и в каждом выводится ещё и по две кнопки применить, хотя во всех других случаях по одной, как и должно быть), причем на этой же странице есть другой инпут (другой компонет, но использует этот же календарь) и там ничего не дублируется

сам элемент календаря...

<div class="datepicker-inline">...</div>

...который создаётся плагином, почему-то в разметке присутствует дважды только под этим инпутом, хотя создаётся этот элемент миксином...

mixin dropdown-date(params)
  .dropdown-date

    .dropdown-date__block
      .dropdown-date__caption
        h3= params.startDateCaption
      .dropdown-date__input-block
        input.dropdown-date__input(id=params.startInpId type='text' placeholder="ДД.ММ.ГГГГ").input__style
        span.dropdown-date__expand-button.material-icons expand_more

    .dropdown-date__block
      .dropdown-date__caption
        h3= params.endDateCaption
      .dropdown-date__input-block
        input.dropdown-date__input(id=params.endInpId type='text' placeholder="ДД.ММ.ГГГГ").input__style
        span.dropdown-date__expand-button.material-icons expand_more

  //- .dropdown-date
  .dropdown-date__date-picker.dropdown-date__date-picker_hidden
    include ../../cards/date-picker/date-picker
    +date-picker()

...точно также как и остальные элементы, но у них календарь не дублируется


Ответы (1 шт):

Автор решения: Divatoz

Лишний импорт одного и того же js файла

→ Ссылка