In flatpickr's options, set position to above center if calendar is to be shown above the clicked input
<!-- Default -->
<div class="sds-input">
<input id="" class="sds-input form-control" type="text" placeholder="Entrez une communication" value="">
</div>
<!-- Calendar -->
<div class="sds-input -hasIcon -calendar js-flatpickr">
<input id="inputCalendar" class="sds-input form-control" type="text" placeholder="11/04/2023" value="">
<div class="sds-input__iconRight">
<span class="sds-icon sds-icon-calendar"></span>
</div>
</div>
{% render "@input",inputOptions,true %}
export default class InputCalendar {
constructor() {
this.fireFlatpickr()
}
fireFlatpickr() {
const calendarInputs = document.querySelectorAll(".js-flatpickr input");
calendarInputs.forEach((el, i) => {
el.addEventListener("focus", function () {
flatpickr(el, {
dateFormat: "d.m.Y",
allowInput: true,
position: "auto center",
shorthandCurrentMonth: true,
mode: "range",
locale: {
firstDayOfWeek: 1,
weekdays: {
shorthand: ["SU", "MO", "TU", "WE", "TH", "FR", "SA"],
longhand: ["SU", "MO", "TU", "WE", "TH", "FR", "SA"] // has to be specified because of a bug in latest version => https://github.com/flatpickr/flatpickr/issues/2654
}
}
});
});
})
}
}