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()
...точно также как и остальные элементы, но у них календарь не дублируется