feat(calendar): use bootstrap dropdown instead of select

This commit is contained in:
Elian Doran 2024-12-14 03:50:42 +02:00
parent 639936dffe
commit c8ae0891bc
No known key found for this signature in database

View File

@ -35,9 +35,13 @@ const DROPDOWN_TPL = `
<div class="calendar-month-selector">
<button class="calendar-btn bx bx-chevron-left" data-calendar-toggle="previous"></button>
<select data-calendar-input="month">
${Object.entries(MONTHS).map(([i, month]) => `<option value=${i}>${month}</option>`)}
</select>
<button class="btn dropdown-toggle" type="button"
data-bs-toggle="dropdown" data-bs-auto-close="true"
aria-expanded="false"
data-calendar-input="month"></button>
<ul class="dropdown-menu" data-calendar-input="month-list">
${Object.entries(MONTHS).map(([i, month]) => `<li><button class="dropdown-item" data-value=${i}>${month}</button></li>`).join("")}
</ul>
<button class="calendar-btn bx bx-chevron-right" data-calendar-toggle="next"></button>
</div>
@ -82,9 +86,11 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
// Month navigation
this.$monthSelect = this.$dropdownContent.find('[data-calendar-input="month"]');
this.$monthSelect.on("input", (e) => {
this.date.setMonth(e.target.value);
this.monthDropdown = bootstrap.Dropdown.getOrCreateInstance(this.$monthSelect);
this.$dropdownContent.find('[data-calendar-input="month-list"] button').on("click", (e) => {
this.date.setMonth(e.target.dataset.value);
this.createMonth();
this.monthDropdown.hide();
});
this.$next = this.$dropdownContent.find('[data-calendar-toggle="next"]');
this.$next.on('click', () => {
@ -234,7 +240,7 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
this.date.setDate(1);
this.date.setMonth(this.date.getMonth() - 1);
this.$monthSelect.val(this.date.getMonth());
this.$monthSelect.text(MONTHS[this.date.getMonth()]);
this.$yearSelect.val(this.date.getFullYear());
}