feat(calendar): use bootstrap dropdown instead of select

Author: eliandoran

src/public/app/widgets/buttons/calendar.js

@@ -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());
     }