@kupola/kupola 1.5.2 → 1.5.4

package/js/datepicker.js

@@ -1,5 +1,6 @@
 import { globalEvents } from './global-events.js';
 import { kupolaInitializer } from './initializer.js';
+import { getUiConfig } from './kupola-config.js';
 
 class Datepicker {
   constructor(element, options = {}) {
@@ -9,25 +10,29 @@ class Datepicker {
     this.icon = element.querySelector('.ds-datepicker__icon');
     this.calendarEl = element.querySelector('.ds-datepicker__calendar');
     this.scope = `datepicker-${Math.random().toString(36).substr(2, 9)}`;
-    
+
     // Options
+    const uiConfig = getUiConfig();
+    const defaultWeekStart = uiConfig.datepicker?.weekStart !== undefined ? uiConfig.datepicker.weekStart : 1;
+    
     this.format = options.format || element.getAttribute('data-datepicker-format') || 'YYYY-MM-DD';
     this.range = options.range || element.hasAttribute('data-datepicker-range');
     this.minDate = options.minDate || element.getAttribute('data-datepicker-min') || null;
     this.maxDate = options.maxDate || element.getAttribute('data-datepicker-max') || null;
     this.disabledDate = options.disabledDate || null; // function(date) => boolean
-    this.weekStart = options.weekStart || parseInt(element.getAttribute('data-datepicker-week-start')) || 0; // 0=Sun, 1=Mon
+    this.weekStart = options.weekStart !== undefined ? options.weekStart : (parseInt(element.getAttribute('data-datepicker-week-start')) || defaultWeekStart); // 0=Sun, 1=Mon
+    this.appendToBody = options.appendToBody !== false;
     this.placeholder = options.placeholder || element.getAttribute('data-datepicker-placeholder') || '';
     this.showToday = options.showToday !== false;
     this.showWeekNumber = options.showWeekNumber || element.hasAttribute('data-datepicker-week-number');
     this.onChange = options.onChange || null;
-    
+
     // i18n
-    this.months = options.months || ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-    this.weekDays = options.weekDays || ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+    this.months = options.months || [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ];
+    this.weekDays = options.weekDays || [ 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa' ];
     this.todayText = options.todayText || 'Today';
     this.clearText = options.clearText || 'Clear';
-    
+
     // State
     this.currentDate = new Date();
     this.viewMode = 'days'; // days | months | years
@@ -35,11 +40,12 @@ class Datepicker {
     this.rangeStart = null;
     this.rangeEnd = null;
     this.isSelectingEnd = false;
-    
+
     this._iconClickHandler = null;
     this._inputClickHandler = null;
     this._endInputClickHandler = null;
     this._documentClickHandler = null;
+    this._originalParent = null;
     this._documentClickListener = null;
     this._resizeHandler = null;
     this._resizeListener = null;
@@ -47,8 +53,8 @@ class Datepicker {
   }
 
   init() {
-    if (!this.calendarEl) return;
-    if (this.element.__kupolaInitialized) return;
+    if (!this.calendarEl) {return;}
+    if (this.element.__kupolaInitialized) {return;}
 
     // Parse initial value
     if (this.input && this.input.value) {
@@ -72,8 +78,8 @@ class Datepicker {
     this._iconClickHandler = (e) => this.toggleCalendar(e);
     this._inputClickHandler = (e) => this.toggleCalendar(e);
 
-    if (this.icon) this.icon.addEventListener('click', this._iconClickHandler);
-    if (this.input) this.input.addEventListener('click', this._inputClickHandler);
+    if (this.icon) {this.icon.addEventListener('click', this._iconClickHandler);}
+    if (this.input) {this.input.addEventListener('click', this._inputClickHandler);}
     if (this.endInput) {
       this._endInputClickHandler = (e) => {
         this.isSelectingEnd = true;
@@ -98,18 +104,18 @@ class Datepicker {
   }
 
   _parseDate(str) {
-    if (!str) return null;
+    if (!str) {return null;}
     const parts = str.split('-');
-    if (parts.length === 3) return new Date(parseInt(parts[0]), parseInt(parts[1]) - 1, parseInt(parts[2]));
+    if (parts.length === 3) {return new Date(parseInt(parts[0]), parseInt(parts[1]) - 1, parseInt(parts[2]));}
     return null;
   }
 
   _formatDate(date) {
-    if (!date) return '';
+    if (!date) {return '';}
     const y = date.getFullYear();
     const m = String(date.getMonth() + 1).padStart(2, '0');
     const d = String(date.getDate()).padStart(2, '0');
-    
+
     return this.format
       .replace('YYYY', y)
       .replace('MM', m)
@@ -119,11 +125,11 @@ class Datepicker {
   _isDateDisabled(date) {
     if (this.minDate) {
       const min = typeof this.minDate === 'string' ? this._parseDate(this.minDate) : this.minDate;
-      if (date < min) return true;
+      if (date < min) {return true;}
     }
     if (this.maxDate) {
       const max = typeof this.maxDate === 'string' ? this._parseDate(this.maxDate) : this.maxDate;
-      if (date > max) return true;
+      if (date > max) {return true;}
     }
     if (this.disabledDate) {
       return this.disabledDate(date);
@@ -137,12 +143,12 @@ class Datepicker {
   }
 
   _isSameDay(d1, d2) {
-    if (!d1 || !d2) return false;
+    if (!d1 || !d2) {return false;}
     return d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate();
   }
 
   _isInRange(date) {
-    if (!this.range || !this.rangeStart || !this.rangeEnd) return false;
+    if (!this.range || !this.rangeStart || !this.rangeEnd) {return false;}
     const time = date.getTime();
     const start = Math.min(this.rangeStart.getTime(), this.rangeEnd.getTime());
     const end = Math.max(this.rangeStart.getTime(), this.rangeEnd.getTime());
@@ -153,29 +159,44 @@ class Datepicker {
     const pickerRect = this.element.getBoundingClientRect();
     const calendarRect = this.calendarEl.getBoundingClientRect();
     const viewportHeight = window.innerHeight;
-    
+
     const spaceBelow = viewportHeight - pickerRect.bottom;
     const spaceAbove = pickerRect.top;
     const calendarHeight = calendarRect.height || 320;
-    
-    if (spaceBelow >= calendarHeight) {
-      this.calendarEl.style.top = 'calc(100% + 4px)';
-      this.calendarEl.style.bottom = 'auto';
-    } else if (spaceAbove >= calendarHeight) {
-      this.calendarEl.style.top = 'auto';
-      this.calendarEl.style.bottom = 'calc(100% + 4px)';
+
+    if (this.appendToBody) {
+      this.calendarEl.style.left = `${pickerRect.left}px`;
+
+      if (spaceBelow >= calendarHeight) {
+        this.calendarEl.style.top = `${pickerRect.bottom + 4}px`;
+        this.calendarEl.style.bottom = 'auto';
+      } else if (spaceAbove >= calendarHeight) {
+        this.calendarEl.style.top = `${pickerRect.top - calendarHeight - 4}px`;
+        this.calendarEl.style.bottom = 'auto';
+      } else {
+        this.calendarEl.style.top = `${pickerRect.bottom + 4}px`;
+        this.calendarEl.style.bottom = 'auto';
+      }
     } else {
-      this.calendarEl.style.top = 'calc(100% + 4px)';
-      this.calendarEl.style.bottom = 'auto';
+      if (spaceBelow >= calendarHeight) {
+        this.calendarEl.style.top = 'calc(100% + 4px)';
+        this.calendarEl.style.bottom = 'auto';
+      } else if (spaceAbove >= calendarHeight) {
+        this.calendarEl.style.top = 'auto';
+        this.calendarEl.style.bottom = 'calc(100% + 4px)';
+      } else {
+        this.calendarEl.style.top = 'calc(100% + 4px)';
+        this.calendarEl.style.bottom = 'auto';
+      }
     }
   }
 
   toggleCalendar(e) {
     e.preventDefault();
     e.stopPropagation();
-    
+
     const isVisible = this.calendarEl.style.display === 'block';
-    
+
     // Close all other datepickers
     document.querySelectorAll('.ds-datepicker__calendar').forEach(c => {
       if (c !== this.calendarEl) {
@@ -183,8 +204,12 @@ class Datepicker {
         c.setAttribute('hidden', '');
       }
     });
-    
+
     if (!isVisible) {
+      if (this.appendToBody) {
+        this._appendCalendarToBody();
+        this._addScrollListener();
+      }
       this.calendarEl.style.display = 'block';
       this.calendarEl.removeAttribute('hidden');
       this.calculatePosition();
@@ -192,13 +217,55 @@ class Datepicker {
   }
 
   hideCalendar(e) {
-    if (!this.element.contains(e.target)) {
+    if (!this.element.contains(e.target) && !this.calendarEl.contains(e.target)) {
       this.calendarEl.style.display = 'none';
       this.calendarEl.setAttribute('hidden', '');
       this.viewMode = 'days';
+      if (this.appendToBody) {
+        this._restoreCalendarFromBody();
+        this._removeScrollListener();
+      }
+    }
+  }
+
+  _addScrollListener() {
+    this._scrollHandler = () => {
+      this.hideCalendar({ target: document });
+    };
+    window.addEventListener('scroll', this._scrollHandler, true);
+  }
+
+  _removeScrollListener() {
+    if (this._scrollHandler) {
+      window.removeEventListener('scroll', this._scrollHandler, true);
+      this._scrollHandler = null;
     }
   }
 
+  _appendCalendarToBody() {
+    if (!this.calendarEl) return;
+    this._originalParent = this.calendarEl.parentNode;
+    this._originalPosition = this.calendarEl.style.position;
+    this._originalTop = this.calendarEl.style.top;
+    this._originalLeft = this.calendarEl.style.left;
+    this._originalWidth = this.calendarEl.style.width;
+
+    this.calendarEl.style.position = 'fixed';
+    this.calendarEl.style.zIndex = '9999';
+    document.body.appendChild(this.calendarEl);
+  }
+
+  _restoreCalendarFromBody() {
+    if (!this.calendarEl || !this._originalParent) return;
+    this._originalParent.appendChild(this.calendarEl);
+    this.calendarEl.style.position = this._originalPosition || '';
+    this.calendarEl.style.top = this._originalTop || '';
+    this.calendarEl.style.left = this._originalLeft || '';
+    this.calendarEl.style.width = this._originalWidth || '';
+    this.calendarEl.style.zIndex = '';
+    this._originalParent = null;
+  }
+
   resizeHandler() {
     if (this.calendarEl.style.display === 'block') {
       this.calculatePosition();
@@ -207,13 +274,13 @@ class Datepicker {
 
   _renderCalendar() {
     const calendar = this.calendarEl;
-    if (!calendar) return;
-    
+    if (!calendar) {return;}
+
     // Clean up old listeners
     calendar.querySelectorAll('.ds-datepicker__day').forEach(dayEl => {
-      if (dayEl._dayClickHandler) dayEl.removeEventListener('click', dayEl._dayClickHandler);
+      if (dayEl._dayClickHandler) {dayEl.removeEventListener('click', dayEl._dayClickHandler);}
     });
-    
+
     if (this.viewMode === 'years') {
       this._renderYearsView();
       return;
@@ -222,43 +289,43 @@ class Datepicker {
       this._renderMonthsView();
       return;
     }
-    
+
     const year = this.currentDate.getFullYear();
     const month = this.currentDate.getMonth();
-    
+
     calendar.innerHTML = '';
-    
+
     // Header with navigation
     const header = document.createElement('div');
     header.className = 'ds-datepicker__header';
-    
+
     const prevBtn = document.createElement('button');
     prevBtn.className = 'ds-datepicker__nav ds-datepicker__nav--prev';
     prevBtn.type = 'button';
     prevBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>';
     prevBtn.addEventListener('click', (e) => { e.stopPropagation(); this._prevMonth(); });
-    
+
     const titleBtn = document.createElement('button');
     titleBtn.className = 'ds-datepicker__title';
     titleBtn.type = 'button';
     titleBtn.textContent = `${year} ${this.months[month]}`;
     titleBtn.addEventListener('click', (e) => { e.stopPropagation(); this.viewMode = 'months'; this._renderCalendar(); });
-    
+
     const nextBtn = document.createElement('button');
     nextBtn.className = 'ds-datepicker__nav ds-datepicker__nav--next';
     nextBtn.type = 'button';
     nextBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>';
     nextBtn.addEventListener('click', (e) => { e.stopPropagation(); this._nextMonth(); });
-    
+
     header.appendChild(prevBtn);
     header.appendChild(titleBtn);
     header.appendChild(nextBtn);
     calendar.appendChild(header);
-    
+
     // Week day headers
     const weekHeader = document.createElement('div');
     weekHeader.className = 'ds-datepicker__weekdays';
-    const orderedDays = [...this.weekDays.slice(this.weekStart), ...this.weekDays.slice(0, this.weekStart)];
+    const orderedDays = [ ...this.weekDays.slice(this.weekStart), ...this.weekDays.slice(0, this.weekStart) ];
     orderedDays.forEach(day => {
       const span = document.createElement('span');
       span.className = 'ds-datepicker__weekday';
@@ -266,22 +333,22 @@ class Datepicker {
       weekHeader.appendChild(span);
     });
     calendar.appendChild(weekHeader);
-    
+
     // Days grid
     const daysEl = document.createElement('div');
     daysEl.className = 'ds-datepicker__days';
-    
+
     const firstDay = new Date(year, month, 1).getDay();
     const daysInMonth = new Date(year, month + 1, 0).getDate();
     const offset = (firstDay - this.weekStart + 7) % 7;
-    
+
     // Empty cells
     for (let i = 0; i < offset; i++) {
       const emptyDay = document.createElement('span');
       emptyDay.className = 'ds-datepicker__day ds-datepicker__day--empty';
       daysEl.appendChild(emptyDay);
     }
-    
+
     // Day cells
     for (let day = 1; day <= daysInMonth; day++) {
       const date = new Date(year, month, day);
@@ -289,11 +356,11 @@ class Datepicker {
       dayEl.className = 'ds-datepicker__day';
       dayEl.type = 'button';
       dayEl.textContent = day;
-      
+
       const dateStr = this._formatDate(date);
-      
-      if (this._isToday(date)) dayEl.classList.add('is-today');
-      
+
+      if (this._isToday(date)) {dayEl.classList.add('is-today');}
+
       // Selected state
       if (this.range) {
         if (this._isSameDay(date, this.rangeStart) || this._isSameDay(date, this.rangeEnd)) {
@@ -307,39 +374,39 @@ class Datepicker {
           dayEl.classList.add('is-selected');
         }
       }
-      
+
       // Disabled state
       if (this._isDateDisabled(date)) {
         dayEl.classList.add('is-disabled');
         dayEl.disabled = true;
       }
-      
+
       const clickHandler = () => this._selectDate(date);
       dayEl.addEventListener('click', clickHandler);
       dayEl._dayClickHandler = clickHandler;
-      
+
       daysEl.appendChild(dayEl);
     }
-    
+
     calendar.appendChild(daysEl);
-    
+
     // Footer with Today / Clear buttons
     if (this.showToday) {
       const footer = document.createElement('div');
       footer.className = 'ds-datepicker__footer';
-      
+
       const todayBtn = document.createElement('button');
       todayBtn.className = 'ds-datepicker__today-btn';
       todayBtn.type = 'button';
       todayBtn.textContent = this.todayText;
       todayBtn.addEventListener('click', (e) => { e.stopPropagation(); this._goToToday(); });
-      
+
       const clearBtn = document.createElement('button');
       clearBtn.className = 'ds-datepicker__clear-btn';
       clearBtn.type = 'button';
       clearBtn.textContent = this.clearText;
       clearBtn.addEventListener('click', (e) => { e.stopPropagation(); this._clearDate(); });
-      
+
       footer.appendChild(todayBtn);
       footer.appendChild(clearBtn);
       calendar.appendChild(footer);
@@ -349,46 +416,46 @@ class Datepicker {
   _renderYearsView() {
     const calendar = this.calendarEl;
     calendar.innerHTML = '';
-    
+
     const currentYear = this.currentDate.getFullYear();
     const startYear = currentYear - 6;
-    
+
     const header = document.createElement('div');
     header.className = 'ds-datepicker__header';
-    
+
     const prevBtn = document.createElement('button');
     prevBtn.className = 'ds-datepicker__nav ds-datepicker__nav--prev';
     prevBtn.type = 'button';
     prevBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>';
     prevBtn.addEventListener('click', (e) => { e.stopPropagation(); this.currentDate.setFullYear(this.currentDate.getFullYear() - 12); this._renderCalendar(); });
-    
+
     const titleBtn = document.createElement('button');
     titleBtn.className = 'ds-datepicker__title';
     titleBtn.type = 'button';
     titleBtn.textContent = `${startYear} - ${startYear + 11}`;
     titleBtn.addEventListener('click', (e) => { e.stopPropagation(); });
-    
+
     const nextBtn = document.createElement('button');
     nextBtn.className = 'ds-datepicker__nav ds-datepicker__nav--next';
     nextBtn.type = 'button';
     nextBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>';
     nextBtn.addEventListener('click', (e) => { e.stopPropagation(); this.currentDate.setFullYear(this.currentDate.getFullYear() + 12); this._renderCalendar(); });
-    
+
     header.appendChild(prevBtn);
     header.appendChild(titleBtn);
     header.appendChild(nextBtn);
     calendar.appendChild(header);
-    
+
     const grid = document.createElement('div');
     grid.className = 'ds-datepicker__years-grid';
-    
+
     for (let i = 0; i < 12; i++) {
       const year = startYear + i;
       const btn = document.createElement('button');
       btn.className = 'ds-datepicker__year-cell';
       btn.type = 'button';
       btn.textContent = year;
-      if (year === currentYear) btn.classList.add('is-selected');
+      if (year === currentYear) {btn.classList.add('is-selected');}
       btn.addEventListener('click', (e) => {
         e.stopPropagation();
         this.currentDate.setFullYear(year);
@@ -397,51 +464,51 @@ class Datepicker {
       });
       grid.appendChild(btn);
     }
-    
+
     calendar.appendChild(grid);
   }
 
   _renderMonthsView() {
     const calendar = this.calendarEl;
     calendar.innerHTML = '';
-    
+
     const year = this.currentDate.getFullYear();
-    
+
     const header = document.createElement('div');
     header.className = 'ds-datepicker__header';
-    
+
     const prevBtn = document.createElement('button');
     prevBtn.className = 'ds-datepicker__nav ds-datepicker__nav--prev';
     prevBtn.type = 'button';
     prevBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>';
     prevBtn.addEventListener('click', (e) => { e.stopPropagation(); this.currentDate.setFullYear(this.currentDate.getFullYear() - 1); this._renderCalendar(); });
-    
+
     const titleBtn = document.createElement('button');
     titleBtn.className = 'ds-datepicker__title';
     titleBtn.type = 'button';
     titleBtn.textContent = year;
     titleBtn.addEventListener('click', (e) => { e.stopPropagation(); this.viewMode = 'years'; this._renderCalendar(); });
-    
+
     const nextBtn = document.createElement('button');
     nextBtn.className = 'ds-datepicker__nav ds-datepicker__nav--next';
     nextBtn.type = 'button';
     nextBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>';
     nextBtn.addEventListener('click', (e) => { e.stopPropagation(); this.currentDate.setFullYear(this.currentDate.getFullYear() + 1); this._renderCalendar(); });
-    
+
     header.appendChild(prevBtn);
     header.appendChild(titleBtn);
     header.appendChild(nextBtn);
     calendar.appendChild(header);
-    
+
     const grid = document.createElement('div');
     grid.className = 'ds-datepicker__months-grid';
-    
+
     this.months.forEach((monthName, idx) => {
       const btn = document.createElement('button');
       btn.className = 'ds-datepicker__month-cell';
       btn.type = 'button';
       btn.textContent = monthName;
-      if (idx === this.currentDate.getMonth()) btn.classList.add('is-selected');
+      if (idx === this.currentDate.getMonth()) {btn.classList.add('is-selected');}
       btn.addEventListener('click', (e) => {
         e.stopPropagation();
         this.currentDate.setMonth(idx);
@@ -450,13 +517,13 @@ class Datepicker {
       });
       grid.appendChild(btn);
     });
-    
+
     calendar.appendChild(grid);
   }
 
   _selectDate(date) {
-    if (this._isDateDisabled(date)) return;
-    
+    if (this._isDateDisabled(date)) {return;}
+
     if (this.range) {
       if (!this.isSelectingEnd || !this.rangeStart) {
         this.rangeStart = date;
@@ -466,13 +533,13 @@ class Datepicker {
         this.rangeEnd = date;
         // Ensure start <= end
         if (this.rangeEnd < this.rangeStart) {
-          [this.rangeStart, this.rangeEnd] = [this.rangeEnd, this.rangeStart];
+          [ this.rangeStart, this.rangeEnd ] = [ this.rangeEnd, this.rangeStart ];
         }
         this.isSelectingEnd = false;
-        
-        if (this.input) this.input.value = this._formatDate(this.rangeStart);
-        if (this.endInput) this.endInput.value = this._formatDate(this.rangeEnd);
-        
+
+        if (this.input) {this.input.value = this._formatDate(this.rangeStart);}
+        if (this.endInput) {this.endInput.value = this._formatDate(this.rangeEnd);}
+
         this.calendarEl.style.display = 'none';
         this.calendarEl.setAttribute('hidden', '');
         this._fireChange();
@@ -488,7 +555,7 @@ class Datepicker {
       this._fireChange();
       return;
     }
-    
+
     this._renderCalendar();
   }
 
@@ -496,7 +563,7 @@ class Datepicker {
     if (this.input) {
       this.input.dispatchEvent(new Event('change', { bubbles: true }));
     }
-    
+
     if (this.onChange) {
       if (this.range) {
         this.onChange({ start: this.rangeStart, end: this.rangeEnd, startStr: this._formatDate(this.rangeStart), endStr: this._formatDate(this.rangeEnd) });
@@ -504,15 +571,15 @@ class Datepicker {
         this.onChange({ date: this.selectedDate, dateStr: this._formatDate(this.selectedDate) });
       }
     }
-    
+
     this.element.dispatchEvent(new CustomEvent('kupola:datepicker-change', {
       detail: {
         date: this.selectedDate,
         dateStr: this._formatDate(this.selectedDate),
         rangeStart: this.rangeStart,
-        rangeEnd: this.rangeEnd
+        rangeEnd: this.rangeEnd,
       },
-      bubbles: true
+      bubbles: true,
     }));
   }
 
@@ -529,7 +596,7 @@ class Datepicker {
   _goToToday() {
     const today = new Date();
     this.currentDate = new Date(today);
-    
+
     if (!this._isDateDisabled(today)) {
       this._selectDate(today);
     } else {
@@ -542,8 +609,8 @@ class Datepicker {
     this.rangeStart = null;
     this.rangeEnd = null;
     this.isSelectingEnd = false;
-    if (this.input) this.input.value = '';
-    if (this.endInput) this.endInput.value = '';
+    if (this.input) {this.input.value = '';}
+    if (this.endInput) {this.endInput.value = '';}
     this.calendarEl.style.display = 'none';
     this.calendarEl.setAttribute('hidden', '');
     this._fireChange();
@@ -555,7 +622,7 @@ class Datepicker {
     if (d) {
       this.selectedDate = d;
       this.currentDate = new Date(d);
-      if (this.input) this.input.value = this._formatDate(d);
+      if (this.input) {this.input.value = this._formatDate(d);}
       this._renderCalendar();
     }
   }
@@ -567,18 +634,18 @@ class Datepicker {
   setRange(start, end) {
     this.rangeStart = typeof start === 'string' ? this._parseDate(start) : start;
     this.rangeEnd = typeof end === 'string' ? this._parseDate(end) : end;
-    if (this.input) this.input.value = this._formatDate(this.rangeStart);
-    if (this.endInput) this.endInput.value = this._formatDate(this.rangeEnd);
+    if (this.input) {this.input.value = this._formatDate(this.rangeStart);}
+    if (this.endInput) {this.endInput.value = this._formatDate(this.rangeEnd);}
     this._renderCalendar();
   }
 
   destroy() {
-    if (!this.element.__kupolaInitialized) return;
+    if (!this.element.__kupolaInitialized) {return;}
 
-    if (this.icon && this._iconClickHandler) this.icon.removeEventListener('click', this._iconClickHandler);
-    if (this.input && this._inputClickHandler) this.input.removeEventListener('click', this._inputClickHandler);
-    if (this.endInput && this._endInputClickHandler) this.endInput.removeEventListener('click', this._endInputClickHandler);
-    if (this._keydownHandler) document.removeEventListener('keydown', this._keydownHandler);
+    if (this.icon && this._iconClickHandler) {this.icon.removeEventListener('click', this._iconClickHandler);}
+    if (this.input && this._inputClickHandler) {this.input.removeEventListener('click', this._inputClickHandler);}
+    if (this.endInput && this._endInputClickHandler) {this.endInput.removeEventListener('click', this._endInputClickHandler);}
+    if (this._keydownHandler) {document.removeEventListener('keydown', this._keydownHandler);}
 
     if (this._documentClickListener && this._documentClickListener.unsubscribe) {
       this._documentClickListener.unsubscribe();
@@ -594,10 +661,14 @@ class Datepicker {
 
     if (this.calendarEl) {
       this.calendarEl.querySelectorAll('.ds-datepicker__day').forEach(dayEl => {
-        if (dayEl._dayClickHandler) dayEl.removeEventListener('click', dayEl._dayClickHandler);
+        if (dayEl._dayClickHandler) {dayEl.removeEventListener('click', dayEl._dayClickHandler);}
       });
     }
 
+    if (this.appendToBody && this._originalParent) {
+      this._restoreCalendarFromBody();
+    }
+
     this._documentClickHandler = null;
     this._resizeHandler = null;
     this._documentClickListener = null;