Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-10-30 04:01:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(calendar): use bootstrap dropdown instead of select

Browse Source
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
1 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/public/app/widgets/buttons/calendar.js
View File

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