mirror of
https://github.com/TriliumNext/Notes.git
synced 2025-07-29 02:52:27 +08:00
feat(calendar): use bootstrap dropdown instead of select
This commit is contained in:
parent
639936dffe
commit
c8ae0891bc
@ -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());
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user