In flatpickr's options, set position to above center if calendar is to be shown above the clicked input
To get flatpickr to show a bigger UI on >= 992px, addd the following snippet to the config when initializing the calendar.(available in the assets tab in the InputCalendar.js file)
onReady:function(selectedDates, dateStr, instance){
instance.calendarContainer.classList.add("flatpickr-big")
}
Issue: https://github.com/flatpickr/flatpickr/issues/689
The javascript that toggles the modal's tabindex attribute on show/hide is available in the assets tab in the InputCalendar.js file, inside the fireTimepickr() function.
<!-- 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>
<!-- Calendar Inline -->
<div class="sds-input -hasIcon -calendar js-flatpickrInline">
<input id="inputCalendarInline" 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()
this.fireInlineFlatpickr()
this.fireTimepickr()
}
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,
onReady:function(selectedDates, dateStr, instance){
instance.calendarContainer.classList.add("flatpickr-big")
},
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
}
}
});
});
})
}
fireInlineFlatpickr() {
const calendarInputs = document.querySelectorAll(".js-flatpickrInline input");
calendarInputs.forEach((el, i) => {
flatpickr(el, {
dateFormat: "d.m.Y",
allowInput: true,
position: "auto center",
shorthandCurrentMonth: true,
mode: "range",
inline: true,
onReady:function(selectedDates, dateStr, instance){
instance.calendarContainer.classList.add("flatpickr-big")
},
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
}
}
});
})
}
fireTimepickr() {
const calendarInputs = document.querySelectorAll(".js-timepickr");
calendarInputs.forEach((el, i) => {
el.addEventListener("focus", function () {
flatpickr(el, {
noCalendar: true,
time_24hr: true,
enableTime: true,
minuteIncrement: 30,
allowInput: true
});
/*
if input is inside a modal, remove the tabindex attribute when modal is shown
set attribute back when closing modal
*/
if($(".modal").length > 0) {
$(el).parents('.modal').on('shown.bs.modal', function (event) {
event.target.removeAttribute('tabindex')
})
$(el).parents('.modal').on('hidden.bs.modal', function (event) {
event.target.setAttribute('tabindex', "-1")
})
}
});
})
}
}