starred/WYGIWYH
1
0
Fork 0
mirror of https://github.com/eitchtee/WYGIWYH.git synced 2026-07-14 08:42:45 +02:00
Code Issues 14 Packages Projects Releases 10 Wiki Activity

fix: datepicker doesn't recalculate position when changing view mode

Browse Source
This commit is contained in:
Herculino Trotta
2025-12-19 22:21:03 -03:00
parent 3dce9e1c55
commit 94f5c25829
1 changed files with 92 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/js/datepicker.js
+39 -11
View File
@@ -78,11 +78,11 @@ const allLocales = {
/** /**
 * Selects a pre-imported language file from the locale map. * Selects a pre-imported language file from the locale map.
 * *
 * @param {string} langCode - The two-letter language code (e.g., 'en', 'es'). * @param {string} langCode - The two-letter language code (e.g., 'en', 'es').
 * @returns {Promise<object>} A promise that resolves with the locale object. * @returns {Promise<object>} A promise that resolves with the locale object.
 */ */
export const getLocale = async (langCode) => { export const getLocale = async (langCode) => {
const locale = allLocales[langCode]; const locale = allLocales[langCode];
@@ -133,9 +133,11 @@ window.DatePicker = async function createDynamicDatePicker(element) {
datepicker.$el.dispatchEvent(_event); datepicker.$el.dispatchEvent(_event);
} }
}; };
// Store popper instance for updating on view changes
let popperInstance = null;
const positionConfig = !isOnMobile ? { const positionConfig = !isOnMobile ? {
position({ $datepicker, $target, $pointer, done }) { position({ $datepicker, $target, $pointer, done }) {
let popper = createPopper($target, $datepicker, { popperInstance = createPopper($target, $datepicker, {
placement: 'bottom', placement: 'bottom',
modifiers: [ modifiers: [
{ {
@@ -161,9 +163,17 @@ window.DatePicker = async function createDynamicDatePicker(element) {
] ]
}); });
return function completeHide() { return function completeHide() {
popper.destroy(); popperInstance.destroy();
popperInstance = null;
done(); done();
}; };
},
onChangeView() {
// Update popper position when view changes (e.g., clicking year)
// Use setTimeout to allow the DOM to update before recalculating
if (popperInstance) {
setTimeout(() => popperInstance.update(), 0);
}
} }
} : {}; } : {};
let opts = { ...baseOpts, ...positionConfig }; let opts = { ...baseOpts, ...positionConfig };
@@ -200,9 +210,11 @@ window.MonthYearPicker = async function createDynamicDatePicker(element) {
datepicker.$el.dispatchEvent(_event); datepicker.$el.dispatchEvent(_event);
} }
}; };
// Store popper instance for updating on view changes
let popperInstance = null;
const positionConfig = !isOnMobile ? { const positionConfig = !isOnMobile ? {
position({ $datepicker, $target, $pointer, done }) { position({ $datepicker, $target, $pointer, done }) {
let popper = createPopper($target, $datepicker, { popperInstance = createPopper($target, $datepicker, {
placement: 'bottom', placement: 'bottom',
modifiers: [ modifiers: [
{ {
@@ -228,9 +240,16 @@ window.MonthYearPicker = async function createDynamicDatePicker(element) {
] ]
}); });
return function completeHide() { return function completeHide() {
popper.destroy(); popperInstance.destroy();
popperInstance = null;
done(); done();
}; };
},
onChangeView() {
// Update popper position when view changes (e.g., clicking year)
if (popperInstance) {
setTimeout(() => popperInstance.update(), 0);
}
} }
} : {}; } : {};
let opts = { ...baseOpts, ...positionConfig }; let opts = { ...baseOpts, ...positionConfig };
@@ -267,9 +286,11 @@ window.YearPicker = async function createDynamicDatePicker(element) {
datepicker.$el.dispatchEvent(_event); datepicker.$el.dispatchEvent(_event);
} }
}; };
// Store popper instance for updating on view changes
let popperInstance = null;
const positionConfig = !isOnMobile ? { const positionConfig = !isOnMobile ? {
position({ $datepicker, $target, $pointer, done }) { position({ $datepicker, $target, $pointer, done }) {
let popper = createPopper($target, $datepicker, { popperInstance = createPopper($target, $datepicker, {
placement: 'bottom', placement: 'bottom',
modifiers: [ modifiers: [
{ {
@@ -295,9 +316,16 @@ window.YearPicker = async function createDynamicDatePicker(element) {
] ]
}); });
return function completeHide() { return function completeHide() {
popper.destroy(); popperInstance.destroy();
popperInstance = null;
done(); done();
}; };
},
onChangeView() {
// Update popper position when view changes (e.g., clicking year)
if (popperInstance) {
setTimeout(() => popperInstance.update(), 0);
}
} }
} : {}; } : {};
let opts = { ...baseOpts, ...positionConfig }; let opts = { ...baseOpts, ...positionConfig };