@keenthemes/ktui 1.0.28 → 1.1.0

package/lib/esm/components/datepicker/datepicker.js

@@ -1,6 +1,7 @@
-/**
- * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
- * Copyright 2025 by Keenthemes Inc
+/*
+ * datepicker.ts - Main implementation for KTDatepicker component
+ * Provides single, range, and multi-date selection with segmented input UI.
+ * Modular rendering and state helpers are imported from datepicker-helpers.ts.
  */
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -17,930 +18,2231 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import KTComponent from '../component';
-import { KTDatepickerCalendar } from './calendar';
-import { KTDatepickerStateManager } from './config';
-import { KTDatepickerKeyboard } from './keyboard';
-import { formatDate, parseDate, isDateDisabled } from './utils';
-import { segmentedDateInputTemplate, segmentedDateRangeInputTemplate, placeholderTemplate, } from './templates';
-import { KTDatepickerEventName } from './events';
-// Helper function to replace stringToElement
-function createElement(html) {
-    var template = document.createElement('template');
-    template.innerHTML = html.trim();
-    return template.content.firstChild;
-}
+import { getTemplateStrings, defaultTemplates, createTemplateRenderer, renderTemplateString, mergeClassData } from './ui/templates/templates';
+import { defaultDatepickerConfig } from './config/config';
+import { renderHeader } from './ui/renderers/header';
+import { renderCalendar } from './ui/renderers/calendar';
+import { renderFooter } from './ui/renderers/footer';
+import { renderTimePicker } from './ui/renderers/time-picker';
+import { EventManager } from './core/event-manager';
+import { FocusManager } from './core/focus-manager';
+import { KTDatepickerDropdown } from './ui/input/dropdown';
+import { KTDatepickerUnifiedStateManager } from './core/unified-state-manager';
+import { formatDateToLocalString } from './utils/date-utils';
+import { formatDate, normalizeDateToMidnight } from './utils/date-formatters';
+import { dateToTimeState, applyTimeToDate, validateTime } from './utils/time-utils';
+import { renderSingleSegmentedInputUI, renderRangeSegmentedInputUI, instantiateSingleSegmentedInput, instantiateRangeSegmentedInputs, updateRangeSelection } from './core/helpers';
 /**
- * KTDatepicker - Main datepicker component class
- * Manages the datepicker functionality and integration with input elements
+ * KTDatepicker
+ *
+ * Datepicker component for selecting single, range, or multiple dates.
+ *
+ * Features:
+ * - Opens on input focus or calendar button click (configurable)
+ * - Supports single, range, and multi-date modes
+ * - Customizable via templates and data attributes
+ * - Keyboard navigation and accessibility support
  */
 var KTDatepicker = /** @class */ (function (_super) {
     __extends(KTDatepicker, _super);
     /**
-     * Constructor for the KTDatepicker class.
+     * Constructor: Initializes the datepicker component
      */
     function KTDatepicker(element, config) {
         var _this = _super.call(this) || this;
         _this._name = 'datepicker';
-        _this._dateInputElement = null;
-        _this._startDateInputElement = null;
-        _this._endDateInputElement = null;
-        _this._displayElement = null;
-        _this._useSegmentedDisplay = false;
-        _this._displayWrapper = null;
-        _this._displayText = null;
-        _this._currentDate = null;
-        _this._currentRange = null;
-        _this._segmentFocused = null;
-        // Check if the element already has a datepicker instance attached to it
-        if (element.getAttribute('data-kt-datepicker-initialized') === 'true') {
-            return _this;
-        }
-        // Initialize the datepicker with the provided element
+        _this._defaultConfig = defaultDatepickerConfig;
+        _this._config = defaultDatepickerConfig;
+        _this._userTemplates = {};
+        _this._input = null;
+        _this._focusManager = null;
+        _this._dropdownModule = null;
+        _this._timePickerRenderer = null;
+        _this._unsubscribeFromState = null;
+        // Dynamic element detection
+        _this._elementObserver = null;
+        // DOM element cache for performance optimization
+        _this._cachedElements = {
+            calendarElement: null,
+            timePickerElement: null,
+            startContainer: null,
+            endContainer: null,
+            yearElement: null,
+            monthElement: null,
+            dayElement: null,
+            hourElement: null,
+            minuteElement: null,
+            secondElement: null,
+            ampmElement: null,
+            monthYearElement: null,
+            timeDisplay: null
+        };
+        /** Handler for Apply button in multi-date mode */
+        _this._onApplyMultiDate = function (e) {
+            // Apply button clicked in multi-date mode
+        };
+        _this._onToday = function (e) {
+            e.preventDefault();
+            var today = new Date();
+            _this.setDate(today);
+        };
+        // Stub for _onClear (to be implemented next)
+        _this._onClear = function (e) {
+            e.preventDefault();
+            // Clear all selection states using unified state manager
+            _this._unifiedStateManager.updateState({
+                selectedDate: null,
+                selectedRange: { start: null, end: null },
+                selectedDates: [],
+                selectedTime: null
+            }, 'clear');
+            if (_this._input) {
+                var evt = new Event('change', { bubbles: true });
+                _this._input.dispatchEvent(evt);
+            }
+        };
+        /**
+         * Handler for Apply button - confirms selection and closes dropdown
+         * Used in range and multi-date modes
+         */
+        _this._onApply = function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            var currentState = _this._unifiedStateManager.getState();
+            // Ensure input value is updated with current selection
+            _this._updateInput(currentState);
+            // Fire onChange event if there's a selection
+            if (_this._config.range && currentState.selectedRange) {
+                if (currentState.selectedRange.start || currentState.selectedRange.end) {
+                    _this._fireDatepickerEvent('onChange', currentState.selectedRange, _this);
+                }
+            }
+            else if (_this._config.multiDate && currentState.selectedDates.length > 0) {
+                _this._fireDatepickerEvent('onChange', currentState.selectedDates, _this);
+            }
+            else if (currentState.selectedDate) {
+                _this._fireDatepickerEvent('onChange', currentState.selectedDate, _this);
+            }
+            // Trigger input change event
+            if (_this._input) {
+                var evt = new Event('change', { bubbles: true });
+                _this._input.dispatchEvent(evt);
+            }
+            // Close the dropdown
+            _this._unifiedStateManager.setDropdownOpen(false, 'apply-button');
+        };
+        /**
+         * Centralized keyboard event handler for all datepicker keyboard interactions.
+         * Handles navigation, selection, and closing for input, calendar, and popover.
+         * Covers: Tab, Shift+Tab, Arrow keys, Enter, Space, Escape, Home, End, PageUp, PageDown.
+         */
+        _this._onKeyDown = function (e) {
+            var _a;
+            if (!_this._unifiedStateManager.isDropdownOpen())
+                return;
+            var target = e.target;
+            // Check if segmented input is focused - let it handle its own keyboard events
+            if (target.closest('[data-segment]')) {
+                return; // Let segmented input handle its own keyboard events
+            }
+            // Handle Escape key
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                return;
+            }
+            // Handle Tab/Shift+Tab: allow normal tabbing, but trap focus within dropdown if needed
+            if (e.key === 'Tab') {
+                // Optionally implement focus trap if required
+                return;
+            }
+            // Handle Arrow keys, Home/End, PageUp/PageDown for calendar grid navigation
+            var isCalendarGrid = target.closest('[data-kt-datepicker-calendar-grid]');
+            if (isCalendarGrid) {
+                // Find all day buttons
+                var dayButtons = Array.from(isCalendarGrid.querySelectorAll('button[data-day]'));
+                var currentIndex = dayButtons.findIndex(function (btn) { return btn === target; });
+                var nextIndex_1 = currentIndex;
+                if (e.key === 'ArrowRight')
+                    nextIndex_1 = Math.min(dayButtons.length - 1, currentIndex + 1);
+                if (e.key === 'ArrowLeft')
+                    nextIndex_1 = Math.max(0, currentIndex - 1);
+                if (e.key === 'ArrowDown')
+                    nextIndex_1 = Math.min(dayButtons.length - 1, currentIndex + 7);
+                if (e.key === 'ArrowUp')
+                    nextIndex_1 = Math.max(0, currentIndex - 7);
+                if (e.key === 'Home')
+                    nextIndex_1 = Math.floor(currentIndex / 7) * 7;
+                if (e.key === 'End')
+                    nextIndex_1 = Math.min(dayButtons.length - 1, Math.floor(currentIndex / 7) * 7 + 6);
+                if (e.key === 'PageUp' || e.key === 'PageDown') {
+                    // Change month and focus first day
+                    _this._changeMonth(e.key === 'PageUp' ? -1 : 1);
+                    setTimeout(function () {
+                        var newGrid = _this._element.querySelector('[data-kt-datepicker-calendar-grid]');
+                        if (newGrid) {
+                            var newButtons = Array.from(newGrid.querySelectorAll('button[data-day]'));
+                            if (newButtons.length > 0) {
+                                // Set roving tabindex
+                                newButtons.forEach(function (btn, idx) { return btn.tabIndex = idx === 0 ? 0 : -1; });
+                                newButtons[0].focus();
+                            }
+                        }
+                    }, 0);
+                    e.preventDefault();
+                    return;
+                }
+                if (nextIndex_1 !== currentIndex && dayButtons[nextIndex_1]) {
+                    // Set roving tabindex
+                    dayButtons.forEach(function (btn, idx) { return btn.tabIndex = idx === nextIndex_1 ? 0 : -1; });
+                    dayButtons[nextIndex_1].focus();
+                    e.preventDefault();
+                    return;
+                }
+                // Enter/Space: select date
+                if (e.key === 'Enter' || e.key === ' ') {
+                    (_a = dayButtons[currentIndex]) === null || _a === void 0 ? void 0 : _a.click();
+                    // Optionally announce selection to screen reader
+                    var liveRegion = _this._element.querySelector('[data-kt-datepicker-live]');
+                    if (liveRegion && dayButtons[currentIndex]) {
+                        liveRegion.textContent = "Selected ".concat(dayButtons[currentIndex].getAttribute('aria-label'));
+                    }
+                    e.preventDefault();
+                    return;
+                }
+            }
+            // Handle navigation for header buttons (prev/next month)
+            if (target.hasAttribute('data-kt-datepicker-prev') || target.hasAttribute('data-kt-datepicker-next')) {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    target.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+                    // Optionally announce navigation to screen reader
+                    var liveRegion = _this._element.querySelector('[data-kt-datepicker-live]');
+                    if (liveRegion) {
+                        liveRegion.textContent = target.hasAttribute('data-kt-datepicker-prev') ? 'Previous month' : 'Next month';
+                    }
+                    e.preventDefault();
+                    return;
+                }
+            }
+            // Handle footer buttons (today, clear, apply)
+            if (target.hasAttribute('data-kt-datepicker-today') || target.hasAttribute('data-kt-datepicker-clear') || target.hasAttribute('data-kt-datepicker-apply')) {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    target.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+                    // Optionally announce action to screen reader
+                    var liveRegion = _this._element.querySelector('[data-kt-datepicker-live]');
+                    if (liveRegion) {
+                        if (target.hasAttribute('data-kt-datepicker-today'))
+                            liveRegion.textContent = 'Today selected';
+                        if (target.hasAttribute('data-kt-datepicker-clear'))
+                            liveRegion.textContent = 'Selection cleared';
+                        if (target.hasAttribute('data-kt-datepicker-apply'))
+                            liveRegion.textContent = 'Selection applied';
+                    }
+                    e.preventDefault();
+                    return;
+                }
+            }
+        };
+        /**
+         * Handler for input focus event, opens the datepicker if showOnFocus is true and input is not disabled/readonly
+         */
+        _this._onInputFocus = function (e) {
+            if (!_this._input)
+                return;
+            if (_this._input.hasAttribute('disabled') || _this._input.hasAttribute('readonly'))
+                return;
+            if (_this._config.showOnFocus) {
+                _this.open();
+            }
+        };
+        /**
+         * Handler for document click event, closes the datepicker if click is outside the component
+         */
+        _this._handleDocumentClick = function (e) {
+            // Skip if click-outside is disabled
+            if (!_this._config.closeOnOutsideClick)
+                return;
+            // Skip if dropdown is not open
+            if (!_this._unifiedStateManager.isDropdownOpen())
+                return;
+            var targetElement = e.target;
+            // Find the dropdown element (it's rendered in body, not inside _element)
+            var dropdownElement = document.querySelector("[data-kt-datepicker-dropdown][data-kt-datepicker-instance-id=\"".concat(_this._instanceId, "\"]"));
+            // Check if click is outside both the datepicker element and the dropdown
+            var isInsideDatepicker = _this._element.contains(targetElement);
+            var isInsideDropdown = dropdownElement && dropdownElement.contains(targetElement);
+            if (!isInsideDatepicker && !isInsideDropdown) {
+                _this.close();
+            }
+        };
+        // Generate unique instance ID
+        _this._instanceId = "datepicker-".concat(Date.now(), "-").concat(Math.random().toString(36).substr(2, 9));
+        // Add instance ID to element for debugging
+        element.setAttribute('data-kt-datepicker-instance-id', _this._instanceId);
         _this._init(element);
-        // Build the configuration object by merging the default config with the provided config
+        // Build config using the standard KTComponent approach
         _this._buildConfig(config);
-        // Store the instance of the datepicker directly on the element
+        _this._templateSet = getTemplateStrings(_this._config);
+        _this._templateRenderer = createTemplateRenderer(_this._templateSet);
+        // Initialize unified state manager
+        _this._unifiedStateManager = new KTDatepickerUnifiedStateManager({
+            enableValidation: true,
+            enableDebugging: _this._config.debug || false,
+            enableUpdateBatching: true,
+            batchDelay: 16
+        });
+        // Subscribe to state changes
+        _this._unsubscribeFromState = _this._unifiedStateManager.subscribe(_this);
+        // Set placeholder from config if available
+        if (_this._input && _this._config.placeholder) {
+            _this._input.setAttribute('placeholder', _this._config.placeholder);
+        }
+        // Set disabled state from config if available
+        if (_this._input && _this._config.disabled) {
+            _this._input.setAttribute('disabled', 'true');
+            // Also set disabled state in unified state manager
+            _this._unifiedStateManager.setDropdownDisabled(true, 'config');
+        }
+        // --- Time initialization ---
+        if (_this._config.enableTime) {
+            _this._unifiedStateManager.updateState({
+                timeGranularity: _this._config.timeGranularity || 'minute'
+            }, 'config');
+            // Initialize time from selected date or current time
+            var baseDate = _this._unifiedStateManager.getState().selectedDate || _this._unifiedStateManager.getState().currentDate || new Date();
+            _this._unifiedStateManager.setSelectedTime(dateToTimeState(baseDate), 'config');
+        }
+        // --- Mode-specific initialization ---
+        if (_this._config.range && _this._config.valueRange) {
+            _this._initRangeFromConfig();
+        }
+        else if (_this._config.multiDate && Array.isArray(_this._config.values)) {
+            _this._initMultiDateFromConfig();
+        }
+        else if (_this._config.value) {
+            _this._initSingleDateFromConfig();
+        }
+        // --- Input focus event for showOnFocus ---
+        if (_this._input) {
+            _this._eventManager.addListener(_this._input, 'focus', _this._onInputFocus);
+        }
+        // --- Document click event for outside click detection ---
+        _this._eventManager.addListener(document, 'click', _this._handleDocumentClick);
         element.instance = _this;
-        // Ensure the element is focusable
-        _this._element.setAttribute('tabindex', '0');
-        _this._element.classList.add('kt-datepicker', 'relative', 'focus:outline-none');
-        // Mark as initialized
-        _this._element.setAttribute('data-kt-datepicker-initialized', 'true');
-        // Find input elements
-        _this._initializeInputElements();
-        // Create display element if needed
-        _this._createDisplayElement();
-        // Create state manager first
-        _this._state = new KTDatepickerStateManager(_this._element, _this._config);
-        _this._config = _this._state.getConfig();
-        // Initialize the calendar and keyboard after creating the state manager
-        _this._calendar = new KTDatepickerCalendar(_this._element, _this._state);
-        _this._keyboard = new KTDatepickerKeyboard(_this._element, _this._state);
-        // Initialize event manager
-        _this._eventManager = _this._state.getEventManager();
-        // Set up event listeners
-        _this._setupEventListeners();
-        // Initialize with any default values
-        _this._initializeDefaultValues();
+        _this._render();
         return _this;
     }
     /**
-     * Initialize input elements
+     * Initialize the datepicker components after configuration is set
      */
-    KTDatepicker.prototype._initializeInputElements = function () {
-        // Get main input element - will be hidden
-        this._dateInputElement = this._element.querySelector('[data-kt-datepicker-input]');
-        // Hide the input element and make it only for data storage
-        if (this._dateInputElement) {
-            this._dateInputElement.classList.add('hidden', 'sr-only');
-            this._dateInputElement.setAttribute('aria-hidden', 'true');
-            this._dateInputElement.tabIndex = -1;
+    KTDatepicker.prototype._initializeDatepicker = function () {
+        // Set up templates
+        this._templateSet = getTemplateStrings(this._config);
+        this._templateRenderer = createTemplateRenderer(this._templateSet);
+        // Initialize state manager
+        this._unifiedStateManager = new KTDatepickerUnifiedStateManager({
+            enableValidation: true,
+            enableDebugging: this._config.debug || false,
+            enableUpdateBatching: true,
+            batchDelay: 16
+        });
+        // Set initial state
+        this._unifiedStateManager.updateState(this._getInitialState(), 'initialization', true);
+        // Subscribe to state changes
+        this._unsubscribeFromState = this._unifiedStateManager.subscribe(this);
+        // Initialize event manager
+        this._eventManager = new EventManager();
+        // Set up instance ID for debugging
+        this._instanceId = "datepicker-".concat(Date.now(), "-").concat(Math.random().toString(36).substr(2, 9));
+        this._element.setAttribute('data-kt-datepicker-instance-id', this._instanceId);
+        // Set placeholder from config if available
+        if (this._input && this._config.placeholder) {
+            this._input.setAttribute('placeholder', this._config.placeholder);
+        }
+        // Set disabled state from config if available
+        if (this._input && this._config.disabled) {
+            this._input.setAttribute('disabled', 'true');
+            // Also set disabled state in unified state manager
+            this._unifiedStateManager.setDropdownDisabled(true, 'config');
+        }
+        // --- Time initialization ---
+        if (this._config.enableTime) {
+            this._unifiedStateManager.updateState({
+                timeGranularity: this._config.timeGranularity || 'minute'
+            }, 'config');
+            // Initialize time from selected date or current time
+            var baseDate = this._unifiedStateManager.getState().selectedDate || this._unifiedStateManager.getState().currentDate || new Date();
+            this._unifiedStateManager.setSelectedTime(dateToTimeState(baseDate), 'config');
+        }
+        // --- Mode-specific initialization ---
+        if (this._config.range && this._config.valueRange) {
+            this._initRangeFromConfig();
+        }
+        else if (this._config.multiDate && Array.isArray(this._config.values)) {
+            this._initMultiDateFromConfig();
         }
-        // Get range input elements if applicable
-        this._startDateInputElement = this._element.querySelector('[data-kt-datepicker-start]');
-        this._endDateInputElement = this._element.querySelector('[data-kt-datepicker-end]');
-        // Get display element if exists
-        this._displayElement = this._element.querySelector('[data-kt-datepicker-display]');
-        // Check if we should use segmented display
-        this._useSegmentedDisplay =
-            this._element.hasAttribute('data-kt-datepicker-segmented') ||
-                this._element.hasAttribute('data-kt-datepicker-segmented-input');
+        else if (this._config.value) {
+            this._initSingleDateFromConfig();
+        }
+        // --- Input focus event for showOnFocus ---
+        if (this._input) {
+            this._eventManager.addListener(this._input, 'focus', this._onInputFocus);
+        }
+        // --- Document click event for outside click detection ---
+        this._eventManager.addListener(document, 'click', this._handleDocumentClick);
+        this._element.instance = this;
+        // Initial render
+        this._render();
     };
     /**
-     * Create display element for datepicker
+     * Get the initial state for the datepicker
      */
-    KTDatepicker.prototype._createDisplayElement = function () {
-        var _this = this;
-        var _a;
-        // Skip if already created
-        if (this._displayElement) {
+    KTDatepicker.prototype._getInitialState = function () {
+        var now = new Date();
+        var selectedDate = this._config.value ? new Date(this._config.value) : null;
+        var selectedTime = selectedDate && this._config.enableTime ? dateToTimeState(selectedDate) : null;
+        return {
+            currentDate: selectedDate || now,
+            selectedDate: selectedDate,
+            selectedRange: null,
+            selectedDates: [],
+            selectedTime: selectedTime,
+            timeGranularity: this._config.timeGranularity || 'minute',
+            viewMode: 'days',
+            isOpen: false,
+            isFocused: false,
+            isTransitioning: false,
+            isDisabled: !!this._config.disabled,
+            validationErrors: [],
+            isValid: true,
+            dropdownState: {
+                isOpen: false,
+                isTransitioning: false,
+                isDisabled: !!this._config.disabled,
+                isFocused: false,
+            },
+        };
+    };
+    /**
+     * Initialize DOM element cache for performance optimization
+     */
+    KTDatepicker.prototype._initializeElementCache = function () {
+        var _a, _b;
+        // Cache main container elements
+        this._cachedElements.calendarElement = this._element.querySelector('[data-kt-datepicker-calendar-table]');
+        this._cachedElements.timePickerElement = this._element.querySelector('[data-kt-datepicker-time-container]');
+        // Cache range mode containers
+        this._cachedElements.startContainer = this._element.querySelector('[data-kt-datepicker-start-container]');
+        this._cachedElements.endContainer = this._element.querySelector('[data-kt-datepicker-end-container]');
+        // Cache segmented input elements
+        this._cachedElements.yearElement = this._element.querySelector('[data-segment="year"]');
+        this._cachedElements.monthElement = this._element.querySelector('[data-segment="month"]');
+        this._cachedElements.dayElement = this._element.querySelector('[data-segment="day"]');
+        this._cachedElements.hourElement = this._element.querySelector('[data-segment="hour"]');
+        this._cachedElements.minuteElement = this._element.querySelector('[data-segment="minute"]');
+        this._cachedElements.secondElement = this._element.querySelector('[data-segment="second"]');
+        this._cachedElements.ampmElement = this._element.querySelector('[data-segment="ampm"]');
+        // Cache navigation and display elements
+        this._cachedElements.monthYearElement = (_a = this._cachedElements.calendarElement) === null || _a === void 0 ? void 0 : _a.querySelector('[data-kt-datepicker-month-year]');
+        this._cachedElements.timeDisplay = (_b = this._cachedElements.timePickerElement) === null || _b === void 0 ? void 0 : _b.querySelector('[data-kt-datepicker-time-value]');
+    };
+    /**
+     * Refresh DOM element cache when structure changes
+     */
+    KTDatepicker.prototype._refreshElementCache = function () {
+        this._initializeElementCache();
+    };
+    /**
+     * Update input field with current state
+     */
+    KTDatepicker.prototype._updateInput = function (state) {
+        if (!this._input)
             return;
+        // Update input value
+        var value = '';
+        if (this._config.range && state.selectedRange) {
+            value = this._formatRange(state.selectedRange.start, state.selectedRange.end);
         }
-        // Get format from config or use default
-        var format = this._config.format || 'mm/dd/yyyy';
-        var placeholder = ((_a = this._dateInputElement) === null || _a === void 0 ? void 0 : _a.getAttribute('placeholder')) || format;
-        // Create wrapper for display element
-        this._displayWrapper = document.createElement('div');
-        this._displayWrapper.className =
-            'kt-datepicker-display-wrapper kt-datepicker-display-segment';
-        this._displayWrapper.setAttribute('role', 'combobox');
-        this._displayWrapper.setAttribute('aria-haspopup', 'dialog');
-        this._displayWrapper.setAttribute('aria-expanded', 'false');
-        this._element.appendChild(this._displayWrapper);
-        if (this._useSegmentedDisplay) {
-            // Create segmented display for better date part selection
-            var displayContainer = document.createElement('div');
-            displayContainer.className = 'kt-datepicker-display-element';
-            displayContainer.setAttribute('tabindex', '0');
-            displayContainer.setAttribute('role', 'textbox');
-            displayContainer.setAttribute('aria-label', placeholder);
-            displayContainer.setAttribute('data-kt-datepicker-display', '');
-            // Add segmented template based on range mode
-            if (this._config.range) {
-                displayContainer.innerHTML = segmentedDateRangeInputTemplate(this._config.format || 'mm/dd/yyyy');
-            }
-            else {
-                displayContainer.innerHTML = segmentedDateInputTemplate(this._config.format || 'mm/dd/yyyy');
-            }
-            this._displayElement = displayContainer;
-            this._displayWrapper.appendChild(this._displayElement);
-            // Add click handlers for segments
-            var segments = this._displayElement.querySelectorAll('[data-segment]');
-            segments.forEach(function (segment) {
-                segment.addEventListener('click', function (e) {
-                    e.stopPropagation();
-                    var segmentType = segment.getAttribute('data-segment');
-                    _this._handleSegmentClick(segmentType);
-                });
-            });
+        else if (this._config.multiDate && state.selectedDates.length > 0) {
+            value = this._formatMultiDate(state.selectedDates);
+        }
+        else if (state.selectedDate) {
+            value = this._formatSingleDate(state.selectedDate);
+        }
+        if (this._input.value !== value) {
+            this._input.value = value;
+        }
+        // Update disabled state
+        if (state.isDisabled) {
+            this._input.setAttribute('disabled', 'true');
         }
         else {
-            // Create simple display element
-            this._displayElement = document.createElement('div');
-            this._displayElement.className = 'kt-datepicker-display-element';
-            this._displayElement.setAttribute('tabindex', '0');
-            this._displayElement.setAttribute('role', 'textbox');
-            this._displayElement.setAttribute('aria-label', placeholder);
-            this._displayElement.setAttribute('data-placeholder', placeholder);
-            this._displayElement.setAttribute('data-kt-datepicker-display', '');
-            // Create display text element
-            this._displayText = document.createElement('span');
-            this._displayText.className = 'kt-datepicker-display-text';
-            this._displayText.textContent = placeholder;
-            this._displayText.classList.add('text-gray-400');
-            this._displayElement.appendChild(this._displayText);
-            this._displayWrapper.appendChild(this._displayElement);
-        }
-        // Add click event to display element
-        this._displayElement.addEventListener('click', function (e) {
-            e.preventDefault();
-            if (!_this._state.getState().isOpen) {
-                _this._state.setOpen(true);
-            }
-        });
-        // Enhanced keyboard event handling for display element
-        this._displayElement.addEventListener('keydown', function (e) {
-            if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
-                e.preventDefault();
-                e.stopPropagation();
-                // If not already open, open the dropdown
-                if (!_this._state.getState().isOpen) {
-                    _this._state.setOpen(true);
-                    // Dispatch a custom event to notify about the keyboard open
-                    _this._eventManager.dispatchKeyboardOpenEvent();
-                }
-            }
-        });
+            this._input.removeAttribute('disabled');
+        }
+        // Update placeholder
+        if (value) {
+            this._input.removeAttribute('placeholder');
+        }
+        else {
+            this._input.setAttribute('placeholder', 'Select date...');
+        }
     };
     /**
-     * Handle segment click to focus and open appropriate view
-     *
-     * @param segmentType - Type of segment clicked
+     * Update single date segmented input
      */
-    KTDatepicker.prototype._handleSegmentClick = function (segmentType) {
-        if (!segmentType)
-            return;
-        // Store the focused segment
-        this._segmentFocused = segmentType;
-        // Remove highlight from all segments
-        this._removeSegmentHighlights();
-        // Add highlight to clicked segment
-        if (this._displayElement) {
-            var segment = this._displayElement.querySelector("[data-segment=\"".concat(segmentType, "\"]"));
-            if (segment) {
-                segment.classList.add('kt-datepicker-segment-focused');
-            }
+    KTDatepicker.prototype._updateSingleSegmentedInput = function (state) {
+        var dateToUse = state.selectedDate || state.currentDate;
+        if (dateToUse) {
+            this._updateDateSegments(dateToUse);
+        }
+        // Update time segments if time is enabled
+        if (state.selectedTime) {
+            this._updateTimeSegments(state.selectedTime);
         }
-        // Set the appropriate view mode based on segment type
-        if (segmentType.includes('day')) {
-            // Day segment - open in days view (default)
-            this._state.setViewMode('days');
-            this._state.setOpen(true);
+    };
+    /**
+     * Update date segments in a specific container
+     */
+    KTDatepicker.prototype._updateDateSegmentsInContainer = function (date, container) {
+        // For range mode, we need to query within the specific container
+        var yearElement = container.querySelector('[data-segment="year"]');
+        var monthElement = container.querySelector('[data-segment="month"]');
+        var dayElement = container.querySelector('[data-segment="day"]');
+        if (yearElement) {
+            yearElement.textContent = date.getFullYear().toString();
         }
-        else if (segmentType.includes('month')) {
-            // Month segment - open in months view
-            this._state.setViewMode('months');
-            this._state.setOpen(true);
+        if (monthElement) {
+            monthElement.textContent = (date.getMonth() + 1).toString().padStart(2, '0');
         }
-        else if (segmentType.includes('year')) {
-            // Year segment - open in years view
-            this._state.setViewMode('years');
-            this._state.setOpen(true);
+        if (dayElement) {
+            dayElement.textContent = date.getDate().toString().padStart(2, '0');
         }
     };
     /**
-     * Set up event listeners
+     * Update date segments (year, month, day)
      */
-    KTDatepicker.prototype._setupEventListeners = function () {
-        var _this = this;
-        // Listen for state changes
-        this._eventManager.addEventListener(KTDatepickerEventName.STATE_CHANGE, function (e) {
-            var state = e.detail.state;
-            // Update ARIA attributes based on open state
-            if (_this._displayWrapper) {
-                _this._displayWrapper.setAttribute('aria-expanded', state.isOpen.toString());
-            }
-            // Update display when closing
-            if (!state.isOpen && state.prevIsOpen) {
-                _this._syncDisplayWithSelectedDate();
-            }
-        });
-        // Set up change event listener to update input values
-        this._eventManager.addEventListener(KTDatepickerEventName.DATE_CHANGE, this._handleDateChange.bind(this));
-        // Add keyboard events to the root element
-        this._element.addEventListener('keydown', function (e) {
-            if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
-                var state = _this._state.getState();
-                if (!state.isOpen) {
-                    e.preventDefault();
-                    _this._state.setOpen(true);
-                }
-            }
-        });
-        // Add keyboard navigation for segments
-        if (this._displayElement && this._useSegmentedDisplay) {
-            this._displayElement.addEventListener('keydown', this._handleSegmentKeydown.bind(this));
+    KTDatepicker.prototype._updateDateSegments = function (date) {
+        this._updateDateSegmentsInContainer(date, this._element);
+    };
+    /**
+     * Update time segments
+     */
+    KTDatepicker.prototype._updateTimeSegments = function (time) {
+        if (this._cachedElements.hourElement) {
+            this._cachedElements.hourElement.textContent = time.hour.toString().padStart(2, '0');
+        }
+        if (this._cachedElements.minuteElement) {
+            this._cachedElements.minuteElement.textContent = time.minute.toString().padStart(2, '0');
+        }
+        if (this._cachedElements.secondElement) {
+            this._cachedElements.secondElement.textContent = time.second.toString().padStart(2, '0');
+        }
+        if (this._cachedElements.ampmElement) {
+            this._cachedElements.ampmElement.textContent = time.hour >= 12 ? 'PM' : 'AM';
         }
     };
     /**
-     * Handle keyboard navigation between segments
-     *
-     * @param e - Keyboard event
+     * Update calendar display
      */
-    KTDatepicker.prototype._handleSegmentKeydown = function (e) {
-        // Only handle if we have a focused segment
-        if (!this._segmentFocused)
+    KTDatepicker.prototype._updateCalendar = function (state) {
+        var _this = this;
+        // Try to find dropdown first
+        var dropdownEl = this._element.querySelector('[data-kt-datepicker-dropdown]');
+        if (!dropdownEl && this._instanceId) {
+            dropdownEl = document.querySelector("[data-kt-datepicker-dropdown][data-kt-datepicker-instance-id=\"".concat(this._instanceId, "\"]"));
+        }
+        if (!dropdownEl) {
             return;
-        var target = e.target;
-        var segmentType = target.getAttribute('data-segment');
-        if (!segmentType)
+        }
+        // Find ALL calendar tables (for multi-month view support)
+        var calendarElements = dropdownEl.querySelectorAll('[data-kt-datepicker-calendar-table]');
+        // If no calendars found, return early
+        if (calendarElements.length === 0) {
             return;
-        // Handle keyboard navigation
-        switch (e.key) {
-            case 'ArrowLeft':
-                e.preventDefault();
-                this._navigateSegments('prev', segmentType);
-                break;
-            case 'ArrowRight':
-                e.preventDefault();
-                this._navigateSegments('next', segmentType);
-                break;
-            case 'Tab':
-                // Let default tab behavior work, but update focus segment when tabbing
-                this._segmentFocused = segmentType;
-                // Remove highlight from all segments
-                this._removeSegmentHighlights();
-                // Add highlight to current segment
-                target.classList.add('segment-focused');
-                break;
-            case 'Enter':
-            case ' ':
-                e.preventDefault();
-                this._handleSegmentClick(segmentType);
-                break;
+        }
+        // Update cache with first calendar (for backward compatibility)
+        if (calendarElements.length > 0) {
+            this._cachedElements.calendarElement = calendarElements[0];
+        }
+        // Update range state on ALL calendar elements for hover handlers to access dynamically
+        if (this._config.range && state.selectedRange) {
+            calendarElements.forEach(function (calendar) {
+                if (state.selectedRange.start) {
+                    calendar.setAttribute('data-kt-range-start', formatDateToLocalString(state.selectedRange.start));
+                }
+                else {
+                    calendar.removeAttribute('data-kt-range-start');
+                }
+                if (state.selectedRange.end) {
+                    calendar.setAttribute('data-kt-range-end', formatDateToLocalString(state.selectedRange.end));
+                }
+                else {
+                    calendar.removeAttribute('data-kt-range-end');
+                }
+            });
+        }
+        else if (this._config.range) {
+            // No range selected, clear attributes from all calendars
+            calendarElements.forEach(function (calendar) {
+                calendar.removeAttribute('data-kt-range-start');
+                calendar.removeAttribute('data-kt-range-end');
+            });
+        }
+        // Update date selection highlighting for ALL calendars
+        calendarElements.forEach(function (calendarElement) {
+            _this._updateDateSelection(state, calendarElement);
+        });
+        // Update navigation (month/year display) - only update first calendar for navigation
+        if (calendarElements.length > 0) {
+            this._updateNavigation(state, calendarElements[0]);
         }
     };
     /**
-     * Navigate between segments with keyboard
-     *
-     * @param direction - 'prev' or 'next'
-     * @param currentSegment - Current segment identifier
+     * Update date selection highlighting
      */
-    KTDatepicker.prototype._navigateSegments = function (direction, currentSegment) {
-        if (!this._displayElement)
-            return;
-        // Define segment order
-        var segments;
-        if (this._config.range) {
-            segments = [
-                'start-month',
-                'start-day',
-                'start-year',
-                'end-month',
-                'end-day',
-                'end-year',
-            ];
+    KTDatepicker.prototype._updateDateSelection = function (state, calendarElement) {
+        var _this = this;
+        var _a, _b;
+        // Clear previous selections
+        var selectedCells = calendarElement.querySelectorAll('[data-kt-selected]');
+        selectedCells.forEach(function (cell) {
+            cell.removeAttribute('data-kt-selected');
+            cell.removeAttribute('aria-selected');
+            cell.classList.remove('active'); // Remove active class if present (legacy support)
+        });
+        // Clear previous range highlighting (only if range is complete, not during hover preview)
+        // Check if we're in hover preview mode by checking if range has start but no end
+        if (((_a = state.selectedRange) === null || _a === void 0 ? void 0 : _a.start) && ((_b = state.selectedRange) === null || _b === void 0 ? void 0 : _b.end)) {
+            // Range is complete, clear all hover-range attributes to re-apply for completed range
+            var hoverRangeCells = calendarElement.querySelectorAll('[data-kt-hover-range]');
+            hoverRangeCells.forEach(function (cell) {
+                cell.removeAttribute('data-kt-hover-range');
+            });
         }
-        else {
-            segments = ['month', 'day', 'year'];
+        // Highlight selected date(s)
+        if (state.selectedDate) {
+            this._highlightDate(state.selectedDate, calendarElement);
         }
-        // Find current index
-        var currentIndex = segments.indexOf(currentSegment);
-        if (currentIndex === -1)
-            return;
-        // Calculate new index
-        var newIndex;
-        if (direction === 'prev') {
-            newIndex = currentIndex === 0 ? segments.length - 1 : currentIndex - 1;
+        // Highlight range start/end dates and dates in between
+        if (state.selectedRange) {
+            this._highlightDateRange(state.selectedRange, calendarElement);
         }
-        else {
-            newIndex = currentIndex === segments.length - 1 ? 0 : currentIndex + 1;
+        // Highlight multi-date selections
+        if (state.selectedDates.length > 0) {
+            state.selectedDates.forEach(function (date) { return _this._highlightDate(date, calendarElement); });
         }
-        // Find new segment element
-        var newSegment = this._displayElement.querySelector("[data-segment=\"".concat(segments[newIndex], "\"]"));
-        if (!newSegment)
-            return;
-        // Update focus
-        newSegment.focus();
-        this._segmentFocused = segments[newIndex];
-        // Remove highlight from all segments
-        this._removeSegmentHighlights();
-        // Add highlight to new segment
-        newSegment.classList.add('segment-focused');
     };
     /**
-     * Remove highlight from all segments
+     * Highlight a specific date
+     * Uses data-kt-selected attribute (class="active" removed for consistency)
      */
-    KTDatepicker.prototype._removeSegmentHighlights = function () {
-        if (!this._displayElement)
-            return;
-        var segments = this._displayElement.querySelectorAll('.segment-part');
-        segments.forEach(function (segment) {
-            segment.classList.remove('segment-focused');
-        });
+    KTDatepicker.prototype._highlightDate = function (date, calendarElement) {
+        var cell = this._findDayCell(date, calendarElement);
+        if (cell) {
+            cell.setAttribute('data-kt-selected', 'true');
+            cell.setAttribute('aria-selected', 'true');
+            // Note: class="active" is redundant - CSS already targets data-kt-selected
+        }
     };
     /**
-     * Sync display element with the selected date
+     * Highlight a date range
+     * Uses data-kt-hover-range for both hover preview and completed ranges (consolidated)
      */
-    KTDatepicker.prototype._syncDisplayWithSelectedDate = function () {
-        var _a;
-        if (!this._displayElement)
-            return;
-        var state = this._state.getState();
-        var selectedDate = state.selectedDate;
-        var selectedDateRange = state.selectedDateRange;
-        if (this._useSegmentedDisplay) {
-            // Update segmented display elements
-            if (selectedDate) {
-                // Single date
-                var daySegment = this._displayElement.querySelector('[data-segment="day"]');
-                var monthSegment = this._displayElement.querySelector('[data-segment="month"]');
-                var yearSegment = this._displayElement.querySelector('[data-segment="year"]');
-                if (daySegment) {
-                    daySegment.textContent = selectedDate
-                        .getDate()
-                        .toString()
-                        .padStart(2, '0');
-                }
-                if (monthSegment) {
-                    monthSegment.textContent = (selectedDate.getMonth() + 1)
-                        .toString()
-                        .padStart(2, '0');
-                }
-                if (yearSegment) {
-                    yearSegment.textContent = selectedDate.getFullYear().toString();
-                }
+    KTDatepicker.prototype._highlightDateRange = function (range, calendarElement) {
+        if (!range.start || !range.end) {
+            // If only start or end is set, just highlight that date (hover preview handles the rest)
+            if (range.start) {
+                this._highlightDate(range.start, calendarElement);
             }
-            else if (selectedDateRange && selectedDateRange.startDate) {
-                // Range selection
-                var startDay = this._displayElement.querySelector('[data-segment="start-day"]');
-                var startMonth = this._displayElement.querySelector('[data-segment="start-month"]');
-                var startYear = this._displayElement.querySelector('[data-segment="start-year"]');
-                if (startDay) {
-                    startDay.textContent = selectedDateRange.startDate
-                        .getDate()
-                        .toString()
-                        .padStart(2, '0');
-                }
-                if (startMonth) {
-                    startMonth.textContent = (selectedDateRange.startDate.getMonth() + 1)
-                        .toString()
-                        .padStart(2, '0');
-                }
-                if (startYear) {
-                    startYear.textContent = selectedDateRange.startDate
-                        .getFullYear()
-                        .toString();
-                }
-                if (selectedDateRange.endDate) {
-                    var endDay = this._displayElement.querySelector('[data-segment="end-day"]');
-                    var endMonth = this._displayElement.querySelector('[data-segment="end-month"]');
-                    var endYear = this._displayElement.querySelector('[data-segment="end-year"]');
-                    if (endDay) {
-                        endDay.textContent = selectedDateRange.endDate
-                            .getDate()
-                            .toString()
-                            .padStart(2, '0');
-                    }
-                    if (endMonth) {
-                        endMonth.textContent = (selectedDateRange.endDate.getMonth() + 1)
-                            .toString()
-                            .padStart(2, '0');
-                    }
-                    if (endYear) {
-                        endYear.textContent = selectedDateRange.endDate
-                            .getFullYear()
-                            .toString();
-                    }
-                }
+            if (range.end) {
+                this._highlightDate(range.end, calendarElement);
             }
+            return;
         }
-        else if (this._displayText) {
-            // Simple display
-            if (selectedDate) {
-                // Clear placeholder styling
-                this._displayText.classList.remove('placeholder');
-                // Format date(s) based on config
-                if (this._config.range &&
-                    selectedDateRange &&
-                    selectedDateRange.startDate &&
-                    selectedDateRange.endDate) {
-                    this._displayText.textContent = "".concat(formatDate(selectedDateRange.startDate, this._config.format, this._config), " - ").concat(formatDate(selectedDateRange.endDate, this._config.format, this._config));
-                }
-                else {
-                    this._displayText.textContent = formatDate(selectedDate, this._config.format, this._config);
+        // Normalize dates to local midnight for accurate comparison
+        var start = new Date(range.start);
+        start.setHours(0, 0, 0, 0);
+        var end = new Date(range.end);
+        end.setHours(0, 0, 0, 0);
+        // Determine actual start and end (handle backward selection)
+        var actualStart = start <= end ? start : end;
+        var actualEnd = start <= end ? end : start;
+        // Highlight start and end dates
+        this._highlightDate(actualStart, calendarElement);
+        this._highlightDate(actualEnd, calendarElement);
+        // Find all calendars in multi-month view to highlight range across all visible months
+        var dropdownEl = calendarElement.closest('[data-kt-datepicker-dropdown]');
+        var allCalendars = dropdownEl
+            ? Array.from(dropdownEl.querySelectorAll('[data-kt-datepicker-calendar-table]'))
+            : [calendarElement];
+        // Highlight all dates in between using data-kt-hover-range (same as hover preview)
+        var current = new Date(actualStart);
+        current.setDate(current.getDate() + 1); // Start from day after start
+        while (current < actualEnd) {
+            var dateLocal = formatDateToLocalString(current);
+            // Search across all calendars to find the cell
+            for (var _i = 0, allCalendars_1 = allCalendars; _i < allCalendars_1.length; _i++) {
+                var calendar = allCalendars_1[_i];
+                var cell = calendar.querySelector("td[data-kt-datepicker-day][data-date=\"".concat(dateLocal, "\"]"));
+                if (cell) {
+                    // Use data-kt-hover-range for completed ranges (consolidated with hover preview)
+                    cell.setAttribute('data-kt-hover-range', 'true');
+                    break; // Found in this calendar, no need to search others
                 }
             }
-            else {
-                // No date selected, show format as placeholder
-                var placeholder = ((_a = this._displayElement) === null || _a === void 0 ? void 0 : _a.getAttribute('data-placeholder')) ||
-                    this._config.format;
-                this._displayText.textContent = placeholder;
-                this._displayText.classList.add('placeholder');
-            }
+            current.setDate(current.getDate() + 1);
         }
     };
     /**
-     * Handle date change events
-     *
-     * @param e - Custom event with date change details
+     * Find day cell for a specific date
+     * Uses data-date attribute (YYYY-MM-DD format) for accurate date matching across months
+     * Searches within the provided calendar element, or across all calendars in multi-month view
      */
-    KTDatepicker.prototype._handleDateChange = function (e) {
-        var _a;
-        var detail = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.payload;
-        if (!detail)
-            return;
-        // Handle single date selection
-        if (detail.selectedDate) {
-            var formattedDate = formatDate(detail.selectedDate, this._config.format, this._config);
-            // Update hidden input value
-            if (this._dateInputElement) {
-                this._dateInputElement.value = formattedDate;
-                // Dispatch change event on input to trigger form validation
-                this._dateInputElement.dispatchEvent(new Event('change', { bubbles: true }));
-            }
-            // Update display element
-            this._updateDisplayElement(detail.selectedDate);
-        }
-        // Handle date range selection
-        if (detail.selectedDateRange && this._config.range) {
-            var _b = detail.selectedDateRange, startDate = _b.startDate, endDate = _b.endDate;
-            // Format the range for the hidden input
-            if (this._dateInputElement) {
-                var displayValue = '';
-                if (startDate) {
-                    displayValue = formatDate(startDate, this._config.format, this._config);
-                    if (endDate) {
-                        var endFormatted = formatDate(endDate, this._config.format, this._config);
-                        displayValue += "".concat(this._config.rangeSeparator).concat(endFormatted);
+    KTDatepicker.prototype._findDayCell = function (date, calendarElement) {
+        var dateLocal = formatDateToLocalString(date); // Use local timezone date string for accurate matching (YYYY-MM-DD)
+        // First, try to find in the provided calendar element
+        var cells = calendarElement.querySelectorAll('td[data-kt-datepicker-day]');
+        for (var _i = 0, _a = Array.from(cells); _i < _a.length; _i++) {
+            var cell = _a[_i];
+            var cellDate = cell.getAttribute('data-date');
+            if (cellDate === dateLocal) {
+                return cell;
+            }
+        }
+        // If not found in provided calendar, search across all calendars in multi-month view
+        // This handles cases where the date might be in a different visible month
+        var dropdownEl = calendarElement.closest('[data-kt-datepicker-dropdown]');
+        if (dropdownEl) {
+            var allCalendars = dropdownEl.querySelectorAll('[data-kt-datepicker-calendar-table]');
+            for (var _b = 0, _c = Array.from(allCalendars); _b < _c.length; _b++) {
+                var calendar = _c[_b];
+                var allCells = calendar.querySelectorAll('td[data-kt-datepicker-day]');
+                for (var _d = 0, _e = Array.from(allCells); _d < _e.length; _d++) {
+                    var cell = _e[_d];
+                    var cellDate = cell.getAttribute('data-date');
+                    if (cellDate === dateLocal) {
+                        return cell;
                     }
                 }
-                this._dateInputElement.value = displayValue;
-                // Dispatch change event on input
-                this._dateInputElement.dispatchEvent(new Event('change', { bubbles: true }));
             }
-            // Update individual start/end inputs if they exist
-            if (this._startDateInputElement && startDate) {
-                this._startDateInputElement.value = formatDate(startDate, this._config.format, this._config);
-                this._startDateInputElement.dispatchEvent(new Event('change', { bubbles: true }));
-            }
-            if (this._endDateInputElement && endDate) {
-                this._endDateInputElement.value = formatDate(endDate, this._config.format, this._config);
-                this._endDateInputElement.dispatchEvent(new Event('change', { bubbles: true }));
-            }
-            // Update display element for range
-            this._updateRangeDisplayElement(startDate, endDate);
         }
+        // No fallback - if date not found by data-date, it's not in any visible calendar view
+        // This prevents incorrect matches (e.g., matching Oct 20 when looking for Nov 20)
+        return null;
     };
     /**
-     * Update the display element for a single date
-     *
-     * @param date - The date to display
+     * Update navigation display
      */
-    KTDatepicker.prototype._updateDisplayElement = function (date) {
-        var _a;
-        if (!this._displayElement)
-            return;
-        if (!date) {
-            // If no date, show placeholder
-            var placeholder = ((_a = this._dateInputElement) === null || _a === void 0 ? void 0 : _a.getAttribute('placeholder')) || 'Select date';
-            this._displayElement.innerHTML = placeholderTemplate(placeholder);
+    KTDatepicker.prototype._updateNavigation = function (state, calendarElement) {
+        if (this._cachedElements.monthYearElement) {
+            var month = state.currentDate.toLocaleDateString('en-US', { month: 'long' });
+            var year = state.currentDate.getFullYear();
+            this._cachedElements.monthYearElement.textContent = "".concat(month, " ").concat(year);
+        }
+    };
+    /**
+     * Update time picker display
+     */
+    KTDatepicker.prototype._updateTimePicker = function (state) {
+        if (!this._cachedElements.timePickerElement || !state.selectedTime)
             return;
+        if (this._cachedElements.timeDisplay) {
+            var timeString = "".concat(state.selectedTime.hour.toString().padStart(2, '0'), ":").concat(state.selectedTime.minute.toString().padStart(2, '0'), ":").concat(state.selectedTime.second.toString().padStart(2, '0'));
+            this._cachedElements.timeDisplay.textContent = timeString;
+        }
+    };
+    /**
+     * Fire events based on state changes using the centralized event system
+     */
+    KTDatepicker.prototype._fireEvents = function (newState, oldState) {
+        var _a, _b, _c, _d;
+        // Fire onChange when selected date changes
+        if (newState.selectedDate !== oldState.selectedDate ||
+            ((_a = newState.selectedRange) === null || _a === void 0 ? void 0 : _a.start) !== ((_b = oldState.selectedRange) === null || _b === void 0 ? void 0 : _b.start) ||
+            ((_c = newState.selectedRange) === null || _c === void 0 ? void 0 : _c.end) !== ((_d = oldState.selectedRange) === null || _d === void 0 ? void 0 : _d.end) ||
+            JSON.stringify(newState.selectedDates) !== JSON.stringify(oldState.selectedDates)) {
+            var selectedValue = null;
+            if (this._config.range && newState.selectedRange) {
+                // For range mode, pass the end date if both are selected, otherwise null
+                selectedValue = newState.selectedRange.end || newState.selectedRange.start;
+            }
+            else if (this._config.multiDate && newState.selectedDates.length > 0) {
+                // For multi-date mode, pass the last selected date
+                selectedValue = newState.selectedDates[newState.selectedDates.length - 1];
+            }
+            else {
+                // For single date mode
+                selectedValue = newState.selectedDate;
+            }
+            this._fireDatepickerEvent('onChange', selectedValue, this);
         }
-        if (this._useSegmentedDisplay) {
-            // Update segmented display
-            var day = date.getDate();
-            var month = date.getMonth() + 1;
-            var year = date.getFullYear();
-            var daySegment = this._displayElement.querySelector('[data-segment="day"]');
-            var monthSegment = this._displayElement.querySelector('[data-segment="month"]');
-            var yearSegment = this._displayElement.querySelector('[data-segment="year"]');
-            if (daySegment)
-                daySegment.textContent = day < 10 ? "0".concat(day) : "".concat(day);
-            if (monthSegment)
-                monthSegment.textContent = month < 10 ? "0".concat(month) : "".concat(month);
-            if (yearSegment)
-                yearSegment.textContent = "".concat(year);
+        // Fire onOpen when dropdown opens
+        if (newState.isOpen && !oldState.isOpen) {
+            this._fireDatepickerEvent('onOpen', this);
         }
-        else {
-            // Simple display
-            this._displayElement.textContent = formatDate(date, this._config.format, this._config);
+        // Fire onClose when dropdown closes
+        if (!newState.isOpen && oldState.isOpen) {
+            this._fireDatepickerEvent('onClose', this);
         }
     };
     /**
-     * Update the display element for a date range
-     *
-     * @param startDate - The start date of the range
-     * @param endDate - The end date of the range
+     * Centralized event firing system - safely dispatches events with error handling
      */
-    KTDatepicker.prototype._updateRangeDisplayElement = function (startDate, endDate) {
-        var _a;
-        if (!this._displayElement)
-            return;
-        if (!startDate) {
-            // If no date, show placeholder
-            var placeholder = ((_a = this._dateInputElement) === null || _a === void 0 ? void 0 : _a.getAttribute('placeholder')) ||
-                'Select date range';
-            this._displayElement.innerHTML = placeholderTemplate(placeholder);
-            return;
+    KTDatepicker.prototype._fireDatepickerEvent = function (eventName) {
+        var args = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            args[_i - 1] = arguments[_i];
         }
-        if (this._useSegmentedDisplay) {
-            // Update segmented range display
-            // Start date segments
-            var startDay = this._displayElement.querySelector('[data-segment="start-day"]');
-            var startMonth = this._displayElement.querySelector('[data-segment="start-month"]');
-            var startYear = this._displayElement.querySelector('[data-segment="start-year"]');
-            if (startDay)
-                startDay.textContent =
-                    startDate.getDate() < 10
-                        ? "0".concat(startDate.getDate())
-                        : "".concat(startDate.getDate());
-            if (startMonth)
-                startMonth.textContent =
-                    startDate.getMonth() + 1 < 10
-                        ? "0".concat(startDate.getMonth() + 1)
-                        : "".concat(startDate.getMonth() + 1);
-            if (startYear)
-                startYear.textContent = "".concat(startDate.getFullYear());
-            // End date segments
-            if (endDate) {
-                var endDay = this._displayElement.querySelector('[data-segment="end-day"]');
-                var endMonth = this._displayElement.querySelector('[data-segment="end-month"]');
-                var endYear = this._displayElement.querySelector('[data-segment="end-year"]');
-                if (endDay)
-                    endDay.textContent =
-                        endDate.getDate() < 10
-                            ? "0".concat(endDate.getDate())
-                            : "".concat(endDate.getDate());
-                if (endMonth)
-                    endMonth.textContent =
-                        endDate.getMonth() + 1 < 10
-                            ? "0".concat(endDate.getMonth() + 1)
-                            : "".concat(endDate.getMonth() + 1);
-                if (endYear)
-                    endYear.textContent = "".concat(endDate.getFullYear());
+        try {
+            var eventHandler = this._config[eventName];
+            if (typeof eventHandler === 'function') {
+                eventHandler.apply(void 0, args);
             }
         }
-        else {
-            // Simple display
-            var displayText = formatDate(startDate, this._config.format, this._config);
-            if (endDate) {
-                var endFormatted = formatDate(endDate, this._config.format, this._config);
-                displayText += "".concat(this._config.rangeSeparator).concat(endFormatted);
-            }
-            this._displayElement.textContent = displayText;
+        catch (error) {
+            // Don't let event handler errors break the datepicker
         }
     };
-    /**
-     * Handle input change events
-     *
-     * @param e - Input change event
-     */
-    KTDatepicker.prototype._handleInputChange = function (e) {
-        var input = e.target;
-        var inputValue = input.value.trim();
-        if (!inputValue) {
-            // Clear selection if input is empty
-            this._state.setSelectedDate(null);
-            return;
+    // --- Mode-specific helpers ---
+    /** Initialize single date from config */
+    KTDatepicker.prototype._initSingleDateFromConfig = function () {
+        if (this._config.value) {
+            var date = new Date(this._config.value);
+            this._unifiedStateManager.setSelectedDate(date, 'config');
+            this._unifiedStateManager.setCurrentDate(date, 'config');
         }
-        if (this._config.range) {
-            // Handle range input
-            var rangeParts = inputValue.split(this._config.rangeSeparator);
-            if (rangeParts.length === 2) {
-                var startDate = parseDate(rangeParts[0].trim(), this._config.format, this._config);
-                var endDate = parseDate(rangeParts[1].trim(), this._config.format, this._config);
-                // Validate dates are within min/max constraints
-                if (startDate && isDateDisabled(startDate, this._config)) {
-                    console.log('Start date from input is outside allowed range:', startDate.toISOString());
-                    return;
-                }
-                if (endDate && isDateDisabled(endDate, this._config)) {
-                    console.log('End date from input is outside allowed range:', endDate.toISOString());
-                    return;
+    };
+    /** Initialize range from config */
+    KTDatepicker.prototype._initRangeFromConfig = function () {
+        if (this._config.valueRange) {
+            var start = this._config.valueRange.start ? new Date(this._config.valueRange.start) : null;
+            var end = this._config.valueRange.end ? new Date(this._config.valueRange.end) : null;
+            this._unifiedStateManager.setSelectedRange({ start: start, end: end }, 'config');
+        }
+    };
+    /** Initialize multi-date from config */
+    KTDatepicker.prototype._initMultiDateFromConfig = function () {
+        if (Array.isArray(this._config.values)) {
+            var dates = this._config.values.map(function (v) { return new Date(v); });
+            this._unifiedStateManager.setSelectedDates(dates, 'config');
+        }
+    };
+    /** Format single date for input */
+    KTDatepicker.prototype._formatSingleDate = function (date) {
+        if (!date)
+            return '';
+        // If time is enabled, include time in the format
+        if (this._config.enableTime) {
+            if (this._config.format && typeof this._config.format === 'string') {
+                // Check if format already includes time tokens
+                var hasTimeTokens = /[Hhms]/.test(this._config.format);
+                if (hasTimeTokens) {
+                    return formatDate(date, this._config.format);
                 }
-                if (startDate && endDate) {
-                    this.setDateRange(startDate, endDate);
+                else {
+                    // Add time format based on granularity and format
+                    var timeFormat = this._getTimeFormat();
+                    var dateFormat = this._config.format;
+                    return formatDate(date, "".concat(dateFormat, " ").concat(timeFormat));
                 }
             }
-            else if (rangeParts.length === 1) {
-                var singleDate = parseDate(rangeParts[0].trim(), this._config.format, this._config);
-                // Validate date is within min/max constraints
-                if (singleDate && isDateDisabled(singleDate, this._config)) {
-                    console.log('Date from input is outside allowed range:', singleDate.toISOString());
-                    return;
-                }
-                if (singleDate) {
-                    this.setDateRange(singleDate, null);
-                }
+            else {
+                // Default format with time
+                var timeFormat = this._getTimeFormat();
+                return "".concat(date.toLocaleDateString(this._config.locale || 'en-US'), " ").concat(formatDate(date, timeFormat));
             }
         }
         else {
-            // Handle single date input
-            var parsedDate = parseDate(inputValue, this._config.format, this._config);
-            // Validate date is within min/max constraints
-            if (parsedDate && isDateDisabled(parsedDate, this._config)) {
-                console.log('Date from input is outside allowed range:', parsedDate.toISOString());
-                return;
+            // Time not enabled, use original logic
+            if (this._config.format && typeof this._config.format === 'string') {
+                return formatDate(date, this._config.format);
             }
-            if (parsedDate) {
-                this.setDate(parsedDate);
+            else if (this._config.locale) {
+                return date.toLocaleDateString(this._config.locale);
+            }
+            else {
+                return date.toLocaleDateString();
             }
         }
     };
     /**
-     * Initialize with default values from input
+     * Get time format string based on granularity and time format
+     * @returns Time format string
      */
-    KTDatepicker.prototype._initializeDefaultValues = function () {
-        // Set min and max dates from attributes if they exist
-        var minDateAttr = this._element.getAttribute('data-kt-datepicker-min-date');
-        var maxDateAttr = this._element.getAttribute('data-kt-datepicker-max-date');
-        if (minDateAttr) {
-            var minDate = parseDate(minDateAttr, this._config.format, this._config);
-            if (minDate) {
-                this.setMinDate(minDate);
-            }
+    KTDatepicker.prototype._getTimeFormat = function () {
+        var granularity = this._unifiedStateManager.getState().timeGranularity || 'minute';
+        var timeFormat = this._config.timeFormat || '24h';
+        switch (granularity) {
+            case 'hour':
+                return timeFormat === '12h' ? 'HH a' : 'HH';
+            case 'minute':
+                return timeFormat === '12h' ? 'HH:mm a' : 'HH:mm';
+            case 'second':
+                return timeFormat === '12h' ? 'HH:mm:ss a' : 'HH:mm:ss';
+            default:
+                return timeFormat === '12h' ? 'HH:mm a' : 'HH:mm';
         }
-        if (maxDateAttr) {
-            var maxDate = parseDate(maxDateAttr, this._config.format, this._config);
-            if (maxDate) {
-                this.setMaxDate(maxDate);
-            }
+    };
+    /** Format range for input */
+    KTDatepicker.prototype._formatRange = function (start, end) {
+        if (start && end) {
+            return "".concat(this._formatSingleDate(start), " \u2013 ").concat(this._formatSingleDate(end));
         }
-        // Check for default value in main input
-        if (this._dateInputElement && this._dateInputElement.value) {
-            this._handleInputChange({
-                target: this._dateInputElement,
-            });
+        else if (start) {
+            return this._formatSingleDate(start);
         }
-        // Check for default values in range inputs
-        else if (this._config.range &&
-            this._startDateInputElement &&
-            this._startDateInputElement.value) {
-            var startDate = parseDate(this._startDateInputElement.value, this._config.format, this._config);
-            var endDate = null;
-            if (this._endDateInputElement && this._endDateInputElement.value) {
-                endDate = parseDate(this._endDateInputElement.value, this._config.format, this._config);
+        return '';
+    };
+    /** Format multi-date for input */
+    KTDatepicker.prototype._formatMultiDate = function (dates) {
+        var _this = this;
+        return dates.map(function (d) { return _this._formatSingleDate(d); }).join(', ');
+    };
+    /** Select a single date */
+    KTDatepicker.prototype._selectSingleDate = function (date) {
+        // Preserve time if time is enabled
+        if (this._config.enableTime) {
+            var timeToUse = this._unifiedStateManager.getState().selectedTime;
+            // If no selectedTime, try to extract from current selectedDate
+            if (!timeToUse) {
+                var currentSelectedDate = this._unifiedStateManager.getState().selectedDate;
+                if (currentSelectedDate) {
+                    timeToUse = dateToTimeState(currentSelectedDate);
+                }
             }
-            if (startDate) {
-                this.setDateRange(startDate, endDate);
+            // If still no time, default to current time
+            if (!timeToUse) {
+                timeToUse = dateToTimeState(new Date());
             }
+            var dateWithTime = applyTimeToDate(date, timeToUse);
+            this._unifiedStateManager.setSelectedDate(dateWithTime, 'calendar');
+        }
+        else {
+            this._unifiedStateManager.setSelectedDate(date, 'calendar');
+        }
+        // Dispatch change event
+        if (this._input) {
+            var evt = new Event('change', { bubbles: true });
+            this._input.dispatchEvent(evt);
         }
     };
     /**
-     * ========================================================================
-     * Public API
-     * ========================================================================
-     */
-    /**
-     * Get the currently selected date
-     *
-     * @returns Selected date, null if no selection, or date range object
+     * Select a range date (calendar click or segmented input change)
+     * Updates both segmented inputs and internal state.
      */
-    KTDatepicker.prototype.getDate = function () {
-        var state = this._state.getState();
-        var config = this._state.getConfig();
-        if (config.range) {
-            return state.selectedDateRange || { startDate: null, endDate: null };
+    KTDatepicker.prototype._selectRangeDate = function (date) {
+        var _a;
+        var currentState = this._unifiedStateManager.getState();
+        // First, let updateRangeSelection handle the date logic (it normalizes to midnight for comparison)
+        var newRange = updateRangeSelection(currentState.selectedRange, date);
+        // Then, if time is enabled, apply time to both start and end dates
+        if (this._config.enableTime) {
+            var timeToUse = currentState.selectedTime;
+            // If no selectedTime, try to extract from current selectedDate or range dates
+            if (!timeToUse) {
+                // Check if we have a start date with time
+                if ((_a = currentState.selectedRange) === null || _a === void 0 ? void 0 : _a.start) {
+                    timeToUse = dateToTimeState(currentState.selectedRange.start);
+                }
+                else if (currentState.selectedDate) {
+                    timeToUse = dateToTimeState(currentState.selectedDate);
+                }
+            }
+            // If still no time, default to current time
+            if (!timeToUse) {
+                timeToUse = dateToTimeState(new Date());
+            }
+            // Apply time to both start and end dates
+            var rangeWithTime = {
+                start: newRange.start ? applyTimeToDate(newRange.start, timeToUse) : null,
+                end: newRange.end ? applyTimeToDate(newRange.end, timeToUse) : null
+            };
+            this._unifiedStateManager.setSelectedRange(rangeWithTime, 'calendar');
         }
         else {
-            return state.selectedDate;
+            this._unifiedStateManager.setSelectedRange(newRange, 'calendar');
+        }
+        if (this._input) {
+            var evt = new Event('change', { bubbles: true });
+            this._input.dispatchEvent(evt);
         }
     };
-    /**
-     * Set the selected date
-     *
-     * @param date - Date to select or null to clear selection
-     */
-    KTDatepicker.prototype.setDate = function (date) {
-        // Skip if the date is disabled (outside min/max range)
-        if (date && isDateDisabled(date, this._config)) {
-            console.log('Date is disabled in setDate, ignoring selection:', date.toISOString());
-            return;
+    /** Select a multi-date */
+    KTDatepicker.prototype._selectMultiDate = function (date) {
+        var currentState = this._unifiedStateManager.getState();
+        var currentDates = currentState.selectedDates || [];
+        // Preserve time if time is enabled
+        var dateToSelect = date;
+        if (this._config.enableTime) {
+            var timeToUse = currentState.selectedTime;
+            // If no selectedTime, try to extract from existing selected dates
+            if (!timeToUse && currentDates.length > 0) {
+                timeToUse = dateToTimeState(currentDates[0]);
+            }
+            else if (!timeToUse && currentState.selectedDate) {
+                timeToUse = dateToTimeState(currentState.selectedDate);
+            }
+            // If still no time, default to current time
+            if (!timeToUse) {
+                timeToUse = dateToTimeState(new Date());
+            }
+            dateToSelect = applyTimeToDate(date, timeToUse);
         }
-        this._state.setSelectedDate(date);
-        if (date) {
-            this._state.setCurrentDate(date);
+        var exists = currentDates.some(function (d) { return d.getTime() === dateToSelect.getTime(); });
+        var newDates;
+        if (exists) {
+            newDates = currentDates.filter(function (d) { return d.getTime() !== dateToSelect.getTime(); });
         }
-        // Update the display
-        this._updateDisplayElement(date);
-        // Update hidden input
-        if (this._dateInputElement && date) {
-            this._dateInputElement.value = formatDate(date, this._config.format, this._config);
-            this._dateInputElement.dispatchEvent(new Event('change', { bubbles: true }));
+        else {
+            newDates = __spreadArray(__spreadArray([], currentDates, true), [dateToSelect], false);
         }
-        else if (this._dateInputElement) {
-            this._dateInputElement.value = '';
-            this._dateInputElement.dispatchEvent(new Event('change', { bubbles: true }));
+        this._unifiedStateManager.setSelectedDates(newDates, 'calendar');
+        if (this._input) {
+            var evt = new Event('change', { bubbles: true });
+            this._input.dispatchEvent(evt);
         }
     };
-    /**
-     * Get the currently selected date range
-     *
-     * @returns Selected date range or null if no selection
-     */
-    KTDatepicker.prototype.getDateRange = function () {
-        var state = this._state.getState();
-        return state.selectedDateRange;
+    KTDatepicker.prototype._init = function (element) {
+        this._element = element;
+        // Find or assign the input
+        this._input = this._element.querySelector('input[data-kt-datepicker-input]');
+        if (!this._input) {
+            // Fallback: find the first input and add the attribute
+            var firstInput = this._element.querySelector('input');
+            if (firstInput) {
+                firstInput.setAttribute('data-kt-datepicker-input', '');
+                this._input = firstInput;
+            }
+            else {
+                // If no input exists, create one and append
+                var newInput = document.createElement('input');
+                newInput.setAttribute('data-kt-datepicker-input', '');
+                this._element.appendChild(newInput);
+                this._input = newInput;
+            }
+        }
     };
     /**
-     * Set the selected date range
-     *
-     * @param start - Start date of the range
-     * @param end - End date of the range
+     * Build config by merging defaults and user config
      */
-    KTDatepicker.prototype.setDateRange = function (start, end) {
-        var _a;
-        var state = this._state.getState();
-        // Ensure we're in range mode
-        if (!this._config.range) {
-            console.warn('Cannot set date range when range mode is disabled');
-            return;
+    KTDatepicker.prototype._buildConfig = function (config) {
+        // First call parent to read data attributes
+        _super.prototype._buildConfig.call(this, config);
+        // Merge templates separately to ensure correct type
+        var mergedTemplates = __assign(__assign(__assign({}, defaultTemplates), (this._config.templates || {})), (this._userTemplates || {}));
+        // Determine closeOnSelect default based on mode and requirements
+        var closeOnSelect;
+        if (typeof this._config.closeOnSelect !== 'undefined') {
+            // User explicitly set closeOnSelect, respect their choice
+            closeOnSelect = this._config.closeOnSelect;
         }
-        // Validate start and end dates are within min/max range
-        if (start && isDateDisabled(start, this._config)) {
-            console.log('Start date is disabled in setDateRange, ignoring selection:', start.toISOString());
-            return;
+        else if (this._config.enableTime) {
+            // Time-enabled: never close on date selection
+            closeOnSelect = false;
         }
-        if (end && isDateDisabled(end, this._config)) {
-            console.log('End date is disabled in setDateRange, ignoring selection:', end.toISOString());
-            return;
+        else if (this._config.range) {
+            // Range mode: handle clicks inside dropdown
+            closeOnSelect = false;
+        }
+        else if (this._config.multiDate) {
+            // Multi-date mode: don't close on individual selections
+            closeOnSelect = false;
+        }
+        else {
+            // Single date only: close on date click
+            closeOnSelect = true;
+        }
+        // Merge with data attributes and passed config
+        // Important: data attributes (this._config) must come after defaults to override them
+        this._config = __assign(__assign(__assign(__assign({}, defaultDatepickerConfig), this._config), (config || {})), { templates: mergedTemplates, closeOnSelect: closeOnSelect });
+        // Initialize event manager
+        this._eventManager = new EventManager();
+        // Initialize focus manager for keyboard navigation
+        this._focusManager = new FocusManager({
+            enableFocusTrapping: true,
+            enableFocusRestoration: true,
+            enableKeyboardNavigation: true,
+            enableDebugging: this._config.debug || false
+        });
+    };
+    /**
+     * Public method to set/override templates at runtime (supports string or function)
+     */
+    KTDatepicker.prototype.setTemplates = function (templates) {
+        this._userTemplates = __assign(__assign({}, this._userTemplates), templates);
+        this._templateSet = getTemplateStrings(this._config);
+        this._templateRenderer.updateTemplates(this._templateSet);
+        this._render();
+    };
+    /**
+     * Render the main container and set this._container
+     */
+    KTDatepicker.prototype._renderContainer = function () {
+        var containerEl = this._templateRenderer.renderTemplateToElement({
+            templateKey: 'container',
+            data: {},
+            configClasses: this._config.classes
+        });
+        this._container = containerEl;
+        return containerEl;
+    };
+    /**
+     * Render the input wrapper and calendar button, move/create input element
+     * In range mode, renders two segmented inputs (start/end) using the segmentedDateRangeInput template.
+     */
+    KTDatepicker.prototype._renderInputWrapper = function (calendarButtonHtml) {
+        var _this = this;
+        var inputWrapperTpl = this._templateSet.inputWrapper || defaultTemplates.inputWrapper;
+        // Set input to hidden instead of removing it, so it remains in DOM for form submission
+        if (this._input) {
+            this._input.type = 'hidden';
+            // Remove any visible styling classes that might interfere
+            this._input.classList.remove('hidden');
+        }
+        if (this._config.range) {
+            var rangeTpl = this._templateSet.segmentedDateRangeInput || defaultTemplates.segmentedDateRangeInput;
+            var _a = renderRangeSegmentedInputUI(inputWrapperTpl, rangeTpl, calendarButtonHtml, this._config), inputWrapperEl_1 = _a.inputWrapperEl, startContainer = _a.startContainer, endContainer = _a.endContainer;
+            instantiateRangeSegmentedInputs(startContainer, endContainer, this._unifiedStateManager.getState(), this._config, function (date) {
+                var _a;
+                var end = ((_a = _this._unifiedStateManager.getState().selectedRange) === null || _a === void 0 ? void 0 : _a.end) || null;
+                var newEnd = end;
+                if (end && date > end)
+                    newEnd = null;
+                _this._unifiedStateManager.updateState({ selectedRange: { start: date, end: newEnd } }, 'range-selection');
+                _this._render();
+            }, function (date) {
+                var _a;
+                var start = ((_a = _this._unifiedStateManager.getState().selectedRange) === null || _a === void 0 ? void 0 : _a.start) || null;
+                var newStart = start;
+                if (start && date < start)
+                    newStart = null;
+                _this._unifiedStateManager.updateState({ selectedRange: { start: newStart, end: date } }, 'range-selection');
+                _this._render();
+            });
+            return inputWrapperEl_1;
+        }
+        // Single-date mode
+        var inputWrapperEl = renderSingleSegmentedInputUI(inputWrapperTpl, calendarButtonHtml, this._config);
+        // Find the segmented input container that was rendered by the template system
+        var segmentedInputContainer = inputWrapperEl.querySelector('[data-kt-datepicker-segmented-input]');
+        instantiateSingleSegmentedInput(segmentedInputContainer, this._unifiedStateManager.getState(), this._config, function (date) {
+            _this.setDate(date);
+        });
+        return inputWrapperEl;
+    };
+    /**
+     * Bind event listener to the calendar button and input wrapper
+     */
+    KTDatepicker.prototype._bindCalendarButtonEvent = function (inputWrapperEl) {
+        var _this = this;
+        var buttonEl = inputWrapperEl.querySelector('button[data-kt-datepicker-calendar-btn]');
+        if (buttonEl && buttonEl instanceof HTMLButtonElement) {
+            buttonEl.type = 'button';
+            buttonEl.setAttribute('aria-label', this._config.calendarButtonAriaLabel || 'Open calendar');
+            buttonEl.addEventListener('click', function (e) {
+                e.preventDefault();
+                e.stopPropagation();
+                if (_this._config.disabled || buttonEl.hasAttribute('disabled')) {
+                    return;
+                }
+                _this.toggle();
+            });
+        }
+        // Add click handler to entire input wrapper for better UX
+        inputWrapperEl.addEventListener('click', function (e) {
+            // Don't handle if disabled
+            if (_this._config.disabled) {
+                return;
+            }
+            // Don't handle if target is a focusable input element (segmented input)
+            var target = e.target;
+            if (target.hasAttribute('contenteditable') || target.hasAttribute('data-segment')) {
+                return;
+            }
+            // Don't handle if already handled by button click
+            if (target === buttonEl || (buttonEl === null || buttonEl === void 0 ? void 0 : buttonEl.contains(target))) {
+                return;
+            }
+            // Open the datepicker
+            _this.open();
+        });
+    };
+    /**
+     * Render the dropdown container from template
+     */
+    KTDatepicker.prototype._renderDropdown = function () {
+        var dropdownEl = this._templateRenderer.renderTemplateToElement({
+            templateKey: 'dropdown',
+            data: {},
+            configClasses: this._config.classes
+        });
+        dropdownEl.setAttribute('data-kt-datepicker-dropdown', '');
+        // Add instance association for better identification
+        if (this._instanceId) {
+            dropdownEl.setAttribute('data-kt-datepicker-instance-id', this._instanceId);
+        }
+        if (!this._unifiedStateManager.isDropdownOpen()) {
+            dropdownEl.classList.add('hidden');
+        }
+        return dropdownEl;
+    };
+    /**
+     * Render header, calendar, and footer into the dropdown element
+     */
+    KTDatepicker.prototype._renderDropdownContent = function (dropdownEl) {
+        var _this = this;
+        var _a;
+        var visibleMonths = (_a = this._config.visibleMonths) !== null && _a !== void 0 ? _a : 1;
+        if (visibleMonths === 1) {
+            this._renderSingleMonth(dropdownEl);
+        }
+        else {
+            this._renderMultiMonth(dropdownEl, visibleMonths);
+        }
+        // --- Render footer using template-driven buttons (conditional by mode) ---
+        var isRange = !!this._config.range;
+        var isMultiDate = !!this._config.multiDate;
+        var showFooter = isRange || isMultiDate;
+        if (showFooter) {
+            var todayButtonHtml = undefined;
+            var clearButtonHtml = undefined;
+            var applyButtonHtml = undefined;
+            var todayButtonTpl = this._templateSet.todayButton || defaultTemplates.todayButton;
+            var clearButtonTpl = this._templateSet.clearButton || defaultTemplates.clearButton;
+            var applyButtonTpl = this._templateSet.applyButton || defaultTemplates.applyButton;
+            // Only show Today/Clear if explicitly enabled in config/templates
+            if (this._config.showTodayButton) {
+                todayButtonHtml = typeof todayButtonTpl === 'function' ? todayButtonTpl({}) : todayButtonTpl;
+            }
+            if (this._config.showClearButton) {
+                clearButtonHtml = typeof clearButtonTpl === 'function' ? clearButtonTpl({}) : clearButtonTpl;
+            }
+            // Always show Apply in range/multi-date mode
+            applyButtonHtml = typeof applyButtonTpl === 'function' ? applyButtonTpl({}) : applyButtonTpl;
+            var footer = renderFooter(this._templateSet.footer, { todayButton: todayButtonHtml, clearButton: clearButtonHtml, applyButton: applyButtonHtml }, this._onToday, this._onClear, this._onApply);
+            dropdownEl.appendChild(footer);
+        }
+        // --- Render time picker if enabled ---
+        var currentState = this._unifiedStateManager.getState();
+        if (this._config.enableTime && currentState.selectedTime) {
+            var timePickerContainer = this._templateRenderer.renderTemplateToElement({
+                templateKey: 'timePickerWrapper',
+                data: {},
+                configClasses: this._config.classes
+            });
+            timePickerContainer.setAttribute('data-kt-datepicker-time-container', '');
+            // Store the time picker renderer result
+            this._timePickerRenderer = renderTimePicker(timePickerContainer, {
+                time: currentState.selectedTime,
+                granularity: currentState.timeGranularity,
+                format: this._config.timeFormat || '24h',
+                minTime: this._config.minTime,
+                maxTime: this._config.maxTime,
+                timeStep: this._config.timeStep || 1,
+                disabled: !!this._config.disabled,
+                onChange: function (newTime) {
+                    // Update unified state manager
+                    _this._unifiedStateManager.updateState({
+                        selectedTime: newTime
+                    }, 'time-picker');
+                    // Apply time to selected date if exists
+                    var updatedState = _this._unifiedStateManager.getState();
+                    if (updatedState.selectedDate) {
+                        var dateWithTime = applyTimeToDate(updatedState.selectedDate, newTime);
+                        _this._unifiedStateManager.updateState({
+                            selectedDate: dateWithTime
+                        }, 'time-picker');
+                    }
+                    // Update the time picker renderer with the new state
+                    if (_this._timePickerRenderer) {
+                        _this._timePickerRenderer.update(newTime);
+                    }
+                },
+                templates: this._templateSet
+            });
+            dropdownEl.appendChild(timePickerContainer);
+        }
+    };
+    /**
+     * Render single month calendar
+     */
+    KTDatepicker.prototype._renderSingleMonth = function (dropdownEl) {
+        var _this = this;
+        var prevButtonHtml;
+        var nextButtonHtml;
+        var prevButtonTpl = this._templateSet.prevButton || defaultTemplates.prevButton;
+        var nextButtonTpl = this._templateSet.nextButton || defaultTemplates.nextButton;
+        prevButtonHtml = typeof prevButtonTpl === 'function' ? prevButtonTpl({}) : prevButtonTpl;
+        nextButtonHtml = typeof nextButtonTpl === 'function' ? nextButtonTpl({}) : nextButtonTpl;
+        var currentState = this._unifiedStateManager.getState();
+        var header = renderHeader(this._templateSet.header, {
+            month: currentState.currentDate.toLocaleString(this._config.locale, { month: 'long' }),
+            year: currentState.currentDate.getFullYear(),
+            prevButton: prevButtonHtml,
+            nextButton: nextButtonHtml,
+        }, function (e) { e.stopPropagation(); _this._changeMonth(-1); }, function (e) { e.stopPropagation(); _this._changeMonth(1); });
+        dropdownEl.appendChild(header);
+        var dayClickHandler = function (day) {
+            _this.setDate(day);
+        };
+        var calendar = renderCalendar(this._templateSet.dayCell, this._getCalendarDays(currentState.currentDate), currentState.currentDate, currentState.selectedDate, dayClickHandler, this._config.locale, this._config.range ? currentState.selectedRange : undefined, this._config.multiDate ? currentState.selectedDates : undefined);
+        dropdownEl.appendChild(calendar);
+    };
+    /**
+     * Get array of dates for multi-month display
+     * @param baseDate - The base date to calculate months from
+     * @param count - Number of months to generate
+     * @returns Array of dates representing the first day of each month
+     */
+    KTDatepicker.prototype._getMultiMonthDates = function (baseDate, count) {
+        var dates = [];
+        for (var i = 0; i < count; i++) {
+            var monthDate = new Date(baseDate.getFullYear(), baseDate.getMonth() + i, 1);
+            dates.push(monthDate);
+        }
+        return dates;
+    };
+    /**
+     * Render a single calendar month for multi-month display
+     * @param monthDate - The date representing the month to render
+     * @param index - Index of this month in the multi-month display
+     * @param totalMonths - Total number of months being displayed
+     * @returns HTMLElement containing the rendered month
+     */
+    KTDatepicker.prototype._renderMultiMonthCalendar = function (monthDate, index, totalMonths) {
+        var _this = this;
+        // Navigation buttons: only first gets prev, only last gets next
+        var prevButtonHtml = '';
+        var nextButtonHtml = '';
+        if (index === 0) {
+            var prevButtonTpl = this._templateSet.prevButton || defaultTemplates.prevButton;
+            prevButtonHtml = typeof prevButtonTpl === 'function' ? prevButtonTpl({}) : prevButtonTpl;
+        }
+        if (index === totalMonths - 1) {
+            var nextButtonTpl = this._templateSet.nextButton || defaultTemplates.nextButton;
+            nextButtonHtml = typeof nextButtonTpl === 'function' ? nextButtonTpl({}) : nextButtonTpl;
+        }
+        var header = renderHeader(this._templateSet.header, {
+            month: monthDate.toLocaleString(this._config.locale, { month: 'long' }),
+            year: monthDate.getFullYear(),
+            prevButton: prevButtonHtml,
+            nextButton: nextButtonHtml,
+        }, function (e) { e.stopPropagation(); _this._changeMonth(-1); }, function (e) { e.stopPropagation(); _this._changeMonth(1); });
+        var currentState = this._unifiedStateManager.getState();
+        var calendar = renderCalendar(this._templateSet.dayCell, this._getCalendarDays(monthDate), monthDate, currentState.selectedDate, function (day) { _this.setDate(day); }, this._config.locale, this._config.range ? currentState.selectedRange : undefined, this._config.multiDate ? currentState.selectedDates : undefined);
+        // Create panel element and append header + calendar directly to preserve event listeners
+        // Instead of converting to HTML strings which lose event listeners
+        var panel = document.createElement('div');
+        panel.setAttribute('data-kt-datepicker-panel', '');
+        // Apply default panel styling (flex flex-col gap-1.5 from CSS)
+        panel.className = 'flex flex-col gap-1.5';
+        // Append header and calendar directly (preserves event listeners)
+        panel.appendChild(header);
+        panel.appendChild(calendar);
+        return panel;
+    };
+    /**
+     * Render multi-month calendar
+     */
+    KTDatepicker.prototype._renderMultiMonth = function (dropdownEl, visibleMonths) {
+        var _this = this;
+        var _a;
+        var currentState = this._unifiedStateManager.getState();
+        var baseDate = new Date(currentState.currentDate);
+        // Get all month dates for multi-month display
+        var monthDates = this._getMultiMonthDates(baseDate, visibleMonths);
+        // Create multi-month container element
+        var multiMonthContainer = document.createElement('div');
+        multiMonthContainer.setAttribute('data-kt-datepicker-multimonth-container', '');
+        // Apply classes: flex flex-col md:flex-row gap-4
+        multiMonthContainer.className = 'flex flex-col md:flex-row gap-4';
+        if ((_a = this._config.classes) === null || _a === void 0 ? void 0 : _a.multiMonthContainer) {
+            multiMonthContainer.className += ' ' + this._config.classes.multiMonthContainer;
+        }
+        // Render each month panel and append directly (preserves event listeners)
+        monthDates.forEach(function (monthDate, index) {
+            var panel = _this._renderMultiMonthCalendar(monthDate, index, visibleMonths);
+            multiMonthContainer.appendChild(panel);
+        });
+        dropdownEl.appendChild(multiMonthContainer);
+    };
+    /**
+     * Render the datepicker UI using templates
+     */
+    KTDatepicker.prototype._render = function () {
+        var _this = this;
+        // Performance marker: Start render
+        if (typeof performance !== 'undefined' && this._config.debug) {
+            performance.mark('datepicker-render-start');
+        }
+        // Store current state before rendering
+        var wasOpen = this._unifiedStateManager.isDropdownOpen();
+        var selectedDate = this._unifiedStateManager.getState().selectedDate;
+        var selectedRange = this._unifiedStateManager.getState().selectedRange;
+        var selectedDates = this._unifiedStateManager.getState().selectedDates;
+        // Remove any previous container
+        if (this._container && this._container.parentNode) {
+            this._container.parentNode.removeChild(this._container);
+        }
+        // Render main container from template
+        var containerEl = this._renderContainer();
+        // Remove any previous input wrapper
+        var existingWrapper = this._element.querySelector('[data-kt-datepicker-input-wrapper]');
+        if (existingWrapper && existingWrapper.parentNode) {
+            existingWrapper.parentNode.removeChild(existingWrapper);
+        }
+        // Render calendar button from template
+        var calendarButtonTpl = this._templateSet.calendarButton || defaultTemplates.calendarButton;
+        var calendarButtonHtml;
+        if (typeof calendarButtonTpl === 'function') {
+            var classData = mergeClassData('calendarButton', { ariaLabel: this._config.calendarButtonAriaLabel || 'Open calendar' }, this._config.classes);
+            calendarButtonHtml = calendarButtonTpl(classData);
+        }
+        else {
+            var classData = mergeClassData('calendarButton', { ariaLabel: this._config.calendarButtonAriaLabel || 'Open calendar' }, this._config.classes);
+            calendarButtonHtml = renderTemplateString(calendarButtonTpl, classData);
+        }
+        // Render input wrapper and calendar button from template
+        var inputWrapperEl = this._renderInputWrapper(calendarButtonHtml);
+        // Attach calendar button event listener
+        this._bindCalendarButtonEvent(inputWrapperEl);
+        // Insert wrapper at the start of the element
+        this._element.insertBefore(inputWrapperEl, this._element.firstChild);
+        // --- Dropdown rendering and attachment ---
+        // Remove any previous dropdown
+        var existingDropdown = this._element.querySelector('[data-kt-datepicker-dropdown]');
+        if (existingDropdown && existingDropdown.parentNode) {
+            existingDropdown.parentNode.removeChild(existingDropdown);
+        }
+        // Render dropdown from template system (never inline)
+        var dropdownEl = this._renderDropdown();
+        this._renderDropdownContent(dropdownEl);
+        this._attachDropdown(inputWrapperEl, dropdownEl);
+        // Restore state
+        this._unifiedStateManager.updateState({
+            selectedDate: selectedDate,
+            selectedRange: selectedRange,
+            selectedDates: selectedDates
+        }, 'render-restore');
+        // Restore open state
+        if (wasOpen) {
+            this._unifiedStateManager.setDropdownOpen(true, 'render-restore');
+            // The dropdown module will automatically open via observer pattern
+        }
+        this._updatePlaceholder();
+        this._updateDisabledState();
+        // Enforce min/max dates after rendering
+        // Use requestAnimationFrame to align with browser render cycle
+        requestAnimationFrame(function () {
+            _this._enforceMinMaxDates();
+        });
+        // Attach keyboard event listeners
+        if (this._input) {
+            this._eventManager.removeListener(this._input, 'keydown', this._onKeyDown);
+            this._eventManager.addListener(this._input, 'keydown', this._onKeyDown);
+        }
+        if (dropdownEl) {
+            this._eventManager.removeListener(dropdownEl, 'keydown', this._onKeyDown);
+            this._eventManager.addListener(dropdownEl, 'keydown', this._onKeyDown);
+        }
+        // Ensure live region exists
+        var liveRegion = this._element.querySelector('[data-kt-datepicker-live]');
+        if (!liveRegion) {
+            liveRegion = this._templateRenderer.renderTemplateToElement({
+                templateKey: 'liveRegion',
+                data: {},
+                configClasses: this._config.classes
+            });
+            this._element.appendChild(liveRegion);
+        }
+        // Initialize DOM element cache after rendering
+        this._initializeElementCache();
+        // Performance marker: End render
+        if (typeof performance !== 'undefined' && this._config.debug) {
+            performance.mark('datepicker-render-end');
+            performance.measure('datepicker-render', 'datepicker-render-start', 'datepicker-render-end');
+        }
+    };
+    /**
+     * Attach the dropdown after the input wrapper
+     */
+    KTDatepicker.prototype._attachDropdown = function (inputWrapperEl, dropdownEl) {
+        // Clean up existing dropdown module
+        if (this._dropdownModule) {
+            this._dropdownModule.dispose();
+        }
+        // Always attach dropdown element to DOM first
+        if (inputWrapperEl.nextSibling) {
+            this._element.insertBefore(dropdownEl, inputWrapperEl.nextSibling);
+        }
+        else {
+            this._element.appendChild(dropdownEl);
+        }
+        // Find the toggle element (calendar button)
+        var toggleElement = this._element.querySelector('button[data-kt-datepicker-calendar-btn]');
+        if (toggleElement) {
+            // Create new dropdown module
+            this._dropdownModule = new KTDatepickerDropdown(this._element, toggleElement, dropdownEl, this._config);
+            // Connect dropdown module to unified state manager
+            if (this._dropdownModule) {
+                this._dropdownModule.setUnifiedStateManager(this._unifiedStateManager);
+                this._unifiedStateManager.subscribe(this._dropdownModule);
+            }
+        }
+    };
+    KTDatepicker.prototype._getCalendarDays = function (date) {
+        var year = date.getFullYear();
+        var month = date.getMonth();
+        var firstDay = new Date(year, month, 1);
+        var lastDay = new Date(year, month + 1, 0);
+        var days = [];
+        // Start from Sunday of the first week
+        var start = new Date(firstDay);
+        start.setDate(firstDay.getDate() - firstDay.getDay());
+        // End at Saturday of the last week
+        var end = new Date(lastDay);
+        end.setDate(lastDay.getDate() + (6 - lastDay.getDay()));
+        // Reuse date object by incrementing instead of creating new ones
+        var currentDate = new Date(start);
+        while (currentDate <= end) {
+            days.push(new Date(currentDate)); // Create new Date instance for each day to avoid mutation issues
+            currentDate.setDate(currentDate.getDate() + 1);
         }
-        // Reset range selection state
-        this._state.getState().isRangeSelectionStart = true;
-        // Set start date
-        if (start) {
-            if (!state.selectedDateRange) {
-                state.selectedDateRange = { startDate: null, endDate: null };
+        return days;
+    };
+    KTDatepicker.prototype._changeMonth = function (offset) {
+        var _this = this;
+        var currentState = this._unifiedStateManager.getState();
+        var d = new Date(currentState.currentDate);
+        d.setMonth(d.getMonth() + offset);
+        // Update the unified state manager and wait for state to propagate
+        this._unifiedStateManager.updateState({
+            currentDate: d
+        }, 'month-navigation');
+        // Ensure state is fully updated before proceeding
+        setTimeout(function () {
+            // Force a state refresh to ensure we have the latest state
+            var updatedState = _this._unifiedStateManager.getState();
+            // Check if the state actually changed
+            if (updatedState.currentDate.getMonth() === d.getMonth()) {
+                // Use multi-month update if multiple months are visible
+                if (_this._config.visibleMonths && _this._config.visibleMonths > 1) {
+                    _this._updateMultiMonthCalendarContent();
+                }
+                else {
+                    _this._updateCalendarContent();
+                }
+            }
+            else {
+                // Wait a bit more for state to propagate
+                setTimeout(function () {
+                    if (_this._config.visibleMonths && _this._config.visibleMonths > 1) {
+                        _this._updateMultiMonthCalendarContent();
+                    }
+                    else {
+                        _this._updateCalendarContent();
+                    }
+                }, 50);
             }
-            state.selectedDateRange.startDate = start;
-            this._state.setCurrentDate(start);
-            // Set end date if provided
-            if (end) {
-                state.selectedDateRange.endDate = end;
+        }, 10);
+    };
+    /**
+   * Update only the calendar content without recreating the dropdown
+   * This preserves the dropdown state while updating the month view
+   */
+    KTDatepicker.prototype._updateCalendarContent = function () {
+        var _this = this;
+        // Performance marker: Start incremental update
+        if (typeof performance !== 'undefined' && this._config.debug) {
+            performance.mark('datepicker-incremental-update-start');
+        }
+        // Instance-scoped dropdown element selection strategy
+        var dropdownEl = null;
+        // First priority: find dropdown within current datepicker instance
+        dropdownEl = this._element.querySelector('[data-kt-datepicker-dropdown]');
+        // Second priority: if instance ID is available, find by instance ID
+        if (!dropdownEl && this._instanceId) {
+            dropdownEl = document.querySelector("[data-kt-datepicker-dropdown][data-kt-datepicker-instance-id=\"".concat(this._instanceId, "\"]"));
+        }
+        // Third priority: check dropdown module reference
+        if (!dropdownEl && this._dropdownModule) {
+            var dropdownModuleElement = this._dropdownModule._dropdownElement;
+            if (dropdownModuleElement) {
+                dropdownEl = dropdownModuleElement;
+            }
+        }
+        // Final fallback: global search with warnings (only if no other instances exist)
+        if (!dropdownEl) {
+            var allDropdowns = document.querySelectorAll('[data-kt-datepicker-dropdown]');
+            if (allDropdowns.length === 1) {
+                // Only one dropdown exists globally, safe to use
+                dropdownEl = allDropdowns[0];
+            }
+            else if (allDropdowns.length > 1) {
+                // Multiple dropdowns exist - this could cause cross-instance issues
+                this._render();
+                return;
             }
             else {
-                state.selectedDateRange.endDate = null;
-            }
-            // Update display element
-            this._updateRangeDisplayElement(start, end);
-            // Update hidden inputs
-            if (this._dateInputElement) {
-                var inputValue = formatDate(start, this._config.format, this._config);
-                if (end) {
-                    inputValue += "".concat(this._config.rangeSeparator).concat(formatDate(end, this._config.format, this._config));
+                this._render();
+                return;
+            }
+        }
+        if (!dropdownEl) {
+            // Fallback to full render if dropdown doesn't exist (should be rare)
+            this._render();
+            return;
+        }
+        // Clear existing calendar content and update only the calendar
+        var calendarEl = dropdownEl.querySelector('[data-kt-datepicker-calendar-table]');
+        if (calendarEl) {
+            // Remove the old calendar
+            calendarEl.remove();
+            // Get current state - ensure we have the most up-to-date state
+            var currentState = this._unifiedStateManager.getState();
+            // Update the month/year display in the header with multiple selector strategies
+            var monthYearEl = dropdownEl.querySelector('[data-kt-datepicker-month-year]');
+            // Fallback selectors if primary selector fails
+            if (!monthYearEl) {
+                monthYearEl = dropdownEl.querySelector('[data-kt-datepicker-month]');
+            }
+            // Additional fallback: look for span containing month and year
+            if (!monthYearEl) {
+                var spans = dropdownEl.querySelectorAll('span');
+                monthYearEl = Array.from(spans).find(function (span) {
+                    return span.textContent && span.textContent.match(/[A-Za-z]+ \d{4}/);
+                });
+            }
+            // Final fallback: any span in header
+            if (!monthYearEl) {
+                var headerEl_1 = dropdownEl.querySelector('[data-kt-datepicker-header]');
+                if (headerEl_1) {
+                    monthYearEl = headerEl_1.querySelector('span');
                 }
-                this._dateInputElement.value = inputValue;
-                this._dateInputElement.dispatchEvent(new Event('change', { bubbles: true }));
             }
-            if (this._startDateInputElement) {
-                this._startDateInputElement.value = formatDate(start, this._config.format, this._config);
-                this._startDateInputElement.dispatchEvent(new Event('change', { bubbles: true }));
+            if (monthYearEl) {
+                var newMonthYear = "".concat(currentState.currentDate.toLocaleString(this._config.locale, { month: 'long' }), " ").concat(currentState.currentDate.getFullYear());
+                monthYearEl.textContent = newMonthYear;
+            }
+            // Render only the new calendar
+            var dayClickHandler = function (day) {
+                _this.setDate(day);
+            };
+            var newCalendar = renderCalendar(this._templateSet.dayCell, this._getCalendarDays(currentState.currentDate), currentState.currentDate, currentState.selectedDate, dayClickHandler, this._config.locale, this._config.range ? currentState.selectedRange : undefined, this._config.multiDate ? currentState.selectedDates : undefined);
+            // Insert the new calendar after the header
+            var headerEl = dropdownEl.querySelector('[data-kt-datepicker-header]');
+            if (headerEl) {
+                headerEl.insertAdjacentElement('afterend', newCalendar);
             }
-            if (this._endDateInputElement && end) {
-                this._endDateInputElement.value = formatDate(end, this._config.format, this._config);
-                this._endDateInputElement.dispatchEvent(new Event('change', { bubbles: true }));
+            else {
+                // Fallback: append to dropdown
+                dropdownEl.appendChild(newCalendar);
             }
-            else if (this._endDateInputElement) {
-                this._endDateInputElement.value = '';
+            // Refresh cache with the new calendar element
+            this._cachedElements.calendarElement = newCalendar;
+            // Enforce min/max dates after calendar update
+            this._enforceMinMaxDates();
+            // Performance marker: End incremental update
+            if (typeof performance !== 'undefined' && this._config.debug) {
+                performance.mark('datepicker-incremental-update-end');
+                performance.measure('datepicker-incremental-update', 'datepicker-incremental-update-start', 'datepicker-incremental-update-end');
             }
-            // Dispatch change event
-            this._eventManager.dispatchEvent(KTDatepickerEventName.DATE_CHANGE, {
-                selectedDateRange: state.selectedDateRange,
-            });
         }
         else {
-            // Clear selection
-            this._state.getState().selectedDateRange = null;
-            // Clear display
-            if (this._displayElement) {
-                var placeholder = ((_a = this._dateInputElement) === null || _a === void 0 ? void 0 : _a.getAttribute('placeholder')) ||
-                    'Select date range';
-                this._displayElement.innerHTML = placeholderTemplate(placeholder);
-            }
-            // Clear inputs
-            if (this._dateInputElement) {
-                this._dateInputElement.value = '';
-                this._dateInputElement.dispatchEvent(new Event('change', { bubbles: true }));
-            }
-            if (this._startDateInputElement) {
-                this._startDateInputElement.value = '';
-                this._startDateInputElement.dispatchEvent(new Event('change', { bubbles: true }));
-            }
-            if (this._endDateInputElement) {
-                this._endDateInputElement.value = '';
-                this._endDateInputElement.dispatchEvent(new Event('change', { bubbles: true }));
-            }
-            this._eventManager.dispatchEvent(KTDatepickerEventName.DATE_CHANGE, {
-                selectedDateRange: null,
-            });
+            // If calendar element not found, fallback to full render
+            this._render();
         }
     };
     /**
-     * Set the minimum selectable date
-     *
-     * @param minDate - Minimum date or null to remove constraint
+     * Update multi-month calendar content without recreating the dropdown
+     * This preserves the dropdown state while updating all visible months
      */
-    KTDatepicker.prototype.setMinDate = function (minDate) {
-        this._config.minDate = minDate;
-        // Refresh calendar view to apply new constraints
-        this._eventManager.dispatchEvent(KTDatepickerEventName.UPDATE);
+    KTDatepicker.prototype._updateMultiMonthCalendarContent = function () {
+        var _this = this;
+        // Instance-scoped dropdown element selection strategy
+        var dropdownEl = null;
+        // First priority: find dropdown within current datepicker instance
+        dropdownEl = this._element.querySelector('[data-kt-datepicker-dropdown]');
+        // Second priority: if instance ID is available, find by instance ID
+        if (!dropdownEl && this._instanceId) {
+            dropdownEl = document.querySelector("[data-kt-datepicker-dropdown][data-kt-datepicker-instance-id=\"".concat(this._instanceId, "\"]"));
+        }
+        // Third priority: check dropdown module reference
+        if (!dropdownEl && this._dropdownModule) {
+            var dropdownModuleElement = this._dropdownModule._dropdownElement;
+            if (dropdownModuleElement) {
+                dropdownEl = dropdownModuleElement;
+            }
+        }
+        // Final fallback: global search with warnings (only if no other instances exist)
+        if (!dropdownEl) {
+            var allDropdowns = document.querySelectorAll('[data-kt-datepicker-dropdown]');
+            if (allDropdowns.length === 1) {
+                // Only one dropdown exists globally, safe to use
+                dropdownEl = allDropdowns[0];
+            }
+            else if (allDropdowns.length > 1) {
+                // Multiple dropdowns exist - this could cause cross-instance issues
+                this._render();
+                return;
+            }
+            else {
+                this._render();
+                return;
+            }
+        }
+        if (!dropdownEl) {
+            // Fallback to full render if dropdown doesn't exist (should be rare)
+            this._render();
+            return;
+        }
+        // Get current state - ensure we have the most up-to-date state
+        var currentState = this._unifiedStateManager.getState();
+        var visibleMonths = this._config.visibleMonths || 1;
+        // Find the multi-month container
+        var multiMonthContainer = dropdownEl.querySelector('[data-kt-datepicker-multimonth-container]');
+        if (!multiMonthContainer) {
+            // Multi-month container not found, fallback to full render
+            this._render();
+            return;
+        }
+        // Clear existing multi-month content
+        multiMonthContainer.innerHTML = '';
+        // Get all month dates for multi-month display
+        var monthDates = this._getMultiMonthDates(currentState.currentDate, visibleMonths);
+        // Re-render each month using the helper method
+        monthDates.forEach(function (monthDate, index) {
+            var panel = _this._renderMultiMonthCalendar(monthDate, index, visibleMonths);
+            multiMonthContainer.appendChild(panel);
+        });
+        // Enforce min/max dates after multi-month calendar update
+        this._enforceMinMaxDates();
+        console.log('[KTDatepicker] Multi-month calendar content updated successfully');
     };
     /**
-     * Set the maximum selectable date
-     *
-     * @param maxDate - Maximum date or null to remove constraint
+     * Set the selected date (single, range, or multi-date)
+     * @param date - The date to select
      */
-    KTDatepicker.prototype.setMaxDate = function (maxDate) {
-        this._config.maxDate = maxDate;
-        // Refresh calendar view to apply new constraints
-        this._eventManager.dispatchEvent(KTDatepickerEventName.UPDATE);
+    KTDatepicker.prototype.setDate = function (date) {
+        console.log('🗓️ [KTDatepicker] setDate called with:', date);
+        // Prevent selection if date is outside min/max
+        if (this._config.minDate && date < new Date(this._config.minDate)) {
+            console.log('🗓️ [KTDatepicker] setDate blocked: date is before minDate');
+            return;
+        }
+        if (this._config.maxDate && date > new Date(this._config.maxDate)) {
+            console.log('🗓️ [KTDatepicker] setDate blocked: date is after maxDate');
+            return;
+        }
+        // Validate time constraints if time is enabled
+        if (this._config.enableTime) {
+            var timeState = dateToTimeState(date);
+            var validation = validateTime(timeState, this._config.minTime, this._config.maxTime);
+            if (!validation.isValid) {
+                console.log('🗓️ [KTDatepicker] setDate blocked: time validation failed:', validation.error);
+                return;
+            }
+        }
+        if (this._config.multiDate) {
+            this._selectMultiDate(date);
+            return;
+        }
+        if (this._config.range) {
+            this._selectRangeDate(date);
+            return;
+        }
+        this._selectSingleDate(date);
+    };
+    /**
+     * Get the selected date
+     */
+    KTDatepicker.prototype.getDate = function () {
+        return this._unifiedStateManager.getState().selectedDate;
     };
     /**
-     * Update the datepicker (refresh view)
+     * Update the datepicker (re-render)
      */
     KTDatepicker.prototype.update = function () {
-        // Trigger calendar update through events
-        this._eventManager.dispatchEvent(KTDatepickerEventName.UPDATE);
+        this._render();
     };
     /**
-     * Destroy the datepicker instance and clean up
+     * Clean up event listeners and DOM on destroy
      */
     KTDatepicker.prototype.destroy = function () {
-        // Remove event listeners
-        this._eventManager.removeEventListener(KTDatepickerEventName.DATE_CHANGE, this._handleDateChange.bind(this));
-        if (this._dateInputElement) {
-            this._dateInputElement.removeEventListener('change', this._handleInputChange.bind(this));
+        console.log('🗓️ [KTDatepicker] destroy() called');
+        if (this._container && this._container.parentNode) {
+            this._container.parentNode.removeChild(this._container);
+        }
+        // Clean up event manager
+        this._eventManager.removeListener(document, 'click', this._handleDocumentClick);
+        if (this._input) {
+            this._eventManager.removeAllListeners(this._input);
+        }
+        // Clean up focus manager
+        if (this._focusManager) {
+            this._focusManager.dispose();
+        }
+        // Clean up dropdown module
+        if (this._dropdownModule) {
+            this._dropdownModule.dispose();
+        }
+        // Clean up unified state manager
+        if (this._unsubscribeFromState) {
+            this._unsubscribeFromState();
+            this._unsubscribeFromState = null;
+        }
+        if (this._unifiedStateManager) {
+            this._unifiedStateManager.dispose();
+        }
+        // Clean up element observer
+        if (this._elementObserver) {
+            this._elementObserver.disconnect();
+            this._elementObserver = null;
+        }
+        // Clean up time picker renderer
+        if (this._timePickerRenderer) {
+            this._timePickerRenderer.cleanup();
+            this._timePickerRenderer = null;
+        }
+        // Clear DOM element cache
+        this._cachedElements = {
+            calendarElement: null,
+            timePickerElement: null,
+            startContainer: null,
+            endContainer: null,
+            yearElement: null,
+            monthElement: null,
+            dayElement: null,
+            hourElement: null,
+            minuteElement: null,
+            secondElement: null,
+            ampmElement: null,
+            monthYearElement: null,
+            timeDisplay: null
+        };
+        this._element.instance = null;
+        console.log('🗓️ [KTDatepicker] destroy() completed');
+    };
+    /**
+     * Start observing for dynamic element creation
+     */
+    KTDatepicker.prototype._startElementObservation = function () {
+        if (this._elementObserver) {
+            this._elementObserver.disconnect();
         }
-        if (this._displayElement) {
-            this._displayElement.remove();
+        this._elementObserver = new MutationObserver(function (mutations) {
+            mutations.forEach(function (mutation) {
+                if (mutation.type === 'childList') {
+                    mutation.addedNodes.forEach(function (node) {
+                        if (node.nodeType === Node.ELEMENT_NODE) {
+                            var element = node;
+                            // Segmented input elements are now handled by direct UI updates
+                        }
+                    });
+                }
+            });
+        });
+        this._elementObserver.observe(this._element, {
+            childList: true,
+            subtree: true
+        });
+    };
+    /**
+     * Update the input placeholder if no date is selected
+     */
+    KTDatepicker.prototype._updatePlaceholder = function () {
+        var currentState = this._unifiedStateManager.getState();
+        if (this._input && !currentState.selectedDate && this._config.placeholder) {
+            this._input.setAttribute('placeholder', this._config.placeholder);
+            console.log('🗓️ [KTDatepicker] _render: Placeholder set to:', this._config.placeholder);
         }
-        // Remove instance from element
-        this._element.removeAttribute('data-kt-datepicker-initialized');
-        delete this._element.instance;
-        // Remove initialized class
-        this._element.classList.remove('relative');
-        // Remove from instances map
-        KTDatepicker._instances.delete(this._element);
     };
     /**
-     * Dispatch a custom event
+     * Update the disabled state of the input and calendar button
      *
-     * @param eventName - Name of the event
-     * @param payload - Optional event payload
+     * Accessibility rationale:
+     * - When disabling the calendar button, set:
+     *   - disabled attribute (removes from tab order, blocks interaction)
+     *   - aria-disabled="true" (announces as disabled to screen readers)
+     *   - tabindex="-1" (removes from tab order for extra safety)
+     * - When enabling, remove these attributes.
+     * This matches accessibility best practices and ensures the button is properly announced and not focusable when disabled.
      */
-    KTDatepicker.prototype._dispatchEvent = function (eventName, payload) {
-        this._eventManager.dispatchEvent(eventName, payload);
+    KTDatepicker.prototype._updateDisabledState = function () {
+        var calendarButton = this._element.querySelector('button[data-kt-datepicker-calendar-btn]');
+        if (this._input && this._config.disabled) {
+            this._input.setAttribute('disabled', 'true');
+            if (calendarButton) {
+                // Set disabled attribute
+                calendarButton.setAttribute('disabled', 'true');
+                // Set aria-disabled for screen readers
+                calendarButton.setAttribute('aria-disabled', 'true');
+                // Remove from tab order
+                calendarButton.setAttribute('tabindex', '-1');
+            }
+            console.log('🗓️ [KTDatepicker] _render: Input and calendar button disabled');
+        }
+        else if (this._input) {
+            this._input.removeAttribute('disabled');
+            if (calendarButton) {
+                // Remove disabled attribute
+                calendarButton.removeAttribute('disabled');
+                // Remove aria-disabled attribute
+                calendarButton.removeAttribute('aria-disabled');
+                // Restore tab order (remove tabindex)
+                calendarButton.removeAttribute('tabindex');
+            }
+        }
     };
     /**
-     * Create instances for all datepicker elements on the page
+     * Update the segmented input UI to reflect current state
      */
-    KTDatepicker.createInstances = function () {
+    KTDatepicker.prototype._updateSegmentedInput = function (state) {
         var _this = this;
-        var elements = document.querySelectorAll('[data-kt-datepicker]');
-        elements.forEach(function (element) {
-            if (element.hasAttribute('data-kt-datepicker') &&
-                !element.getAttribute('data-kt-datepicker-initialized')) {
-                // Create instance
-                var instance = new KTDatepicker(element);
-                _this._instances.set(element, instance);
+        var segmentedContainer = this._element.querySelector('[data-kt-datepicker-segmented-input]');
+        if (!segmentedContainer)
+            return;
+        // Re-instantiate the segmented input with the current state
+        // This will update the display without recreating the entire UI
+        instantiateSingleSegmentedInput(segmentedContainer, state, this._config, function (date) { return _this._handleSegmentedInputChange(date); });
+    };
+    /**
+     * Update the range segmented inputs UI to reflect current state
+     */
+    KTDatepicker.prototype._updateRangeSegmentedInput = function (state) {
+        var _this = this;
+        var startContainer = this._element.querySelector('[data-kt-datepicker-start-container]');
+        var endContainer = this._element.querySelector('[data-kt-datepicker-end-container]');
+        if (!startContainer || !endContainer)
+            return;
+        // Re-instantiate the range segmented inputs with the current state
+        // This will update the display without recreating the entire UI
+        instantiateRangeSegmentedInputs(startContainer, endContainer, state, this._config, function (date) {
+            var _a;
+            var end = ((_a = state.selectedRange) === null || _a === void 0 ? void 0 : _a.end) || null;
+            var newEnd = end;
+            if (end && date > end)
+                newEnd = null;
+            _this._unifiedStateManager.updateState({ selectedRange: { start: date, end: newEnd } }, 'range-selection');
+            _this._updateCalendarContent();
+        }, function (date) {
+            var _a;
+            var start = ((_a = state.selectedRange) === null || _a === void 0 ? void 0 : _a.start) || null;
+            var newStart = start;
+            if (start && date < start)
+                newStart = null;
+            _this._unifiedStateManager.updateState({ selectedRange: { start: newStart, end: date } }, 'range-selection');
+            _this._updateCalendarContent();
+        });
+    };
+    /**
+     * Handle changes from the segmented input
+     */
+    KTDatepicker.prototype._handleSegmentedInputChange = function (date) {
+        console.log('🗓️ [KTDatepicker] Segmented input change:', date);
+        // When date changes from segmented input, also update the calendar view to show the selected date's month/year
+        var currentState = this._unifiedStateManager.getState();
+        var newCurrentDate = new Date(date.getFullYear(), date.getMonth(), 1); // First day of selected date's month
+        // Prepare state updates
+        var stateUpdates = {
+            selectedDate: date,
+            currentDate: newCurrentDate
+        };
+        // Update selectedTime if time is enabled
+        if (this._config.enableTime) {
+            stateUpdates.selectedTime = dateToTimeState(date);
+        }
+        // Update both selectedDate and currentDate to sync the calendar view
+        // Use immediate update to ensure events fire synchronously
+        this._unifiedStateManager.updateState(stateUpdates, 'segmented-input', true);
+        // Update calendar content to sync dropdown even when closed
+        this._updateCalendarContent();
+        // Fire onChange event
+        this._fireDatepickerEvent('onChange', date, this);
+    };
+    /**
+     * Normalize a date to midnight for date-only comparison (removes time component)
+     */
+    /**
+     * Disable day buttons outside min/max date range
+     */
+    KTDatepicker.prototype._enforceMinMaxDates = function () {
+        if (this._config.minDate || this._config.maxDate) {
+            // Normalize min/max dates to midnight for date-only comparison
+            var minDate_1 = this._config.minDate ? normalizeDateToMidnight(new Date(this._config.minDate)) : null;
+            var maxDate_1 = this._config.maxDate ? normalizeDateToMidnight(new Date(this._config.maxDate)) : null;
+            // Find calendar element - try multiple strategies
+            var calendarElement = this._cachedElements.calendarElement;
+            if (!calendarElement || !calendarElement.isConnected) {
+                // Try to find dropdown first
+                var dropdownEl = this._element.querySelector('[data-kt-datepicker-dropdown]');
+                if (!dropdownEl && this._instanceId) {
+                    dropdownEl = document.querySelector("[data-kt-datepicker-dropdown][data-kt-datepicker-instance-id=\"".concat(this._instanceId, "\"]"));
+                }
+                if (dropdownEl) {
+                    calendarElement = dropdownEl.querySelector('[data-kt-datepicker-calendar-table]');
+                }
             }
+            if (!calendarElement)
+                return;
+            // Get all day cells using the calendar element scope
+            var dayCells = calendarElement.querySelectorAll('td[data-kt-datepicker-day]');
+            dayCells.forEach(function (td) {
+                // Get the actual date from the data-date attribute (stored as ISO string)
+                var dateISO = td.getAttribute('data-date');
+                if (!dateISO)
+                    return;
+                // Parse the ISO date and normalize to midnight for comparison
+                var cellDate = normalizeDateToMidnight(new Date(dateISO));
+                var btn = td.querySelector('button[data-day]');
+                if (!btn)
+                    return;
+                var disabled = false;
+                // Compare dates (normalized to midnight) for proper date-only comparison
+                if (minDate_1 && cellDate < minDate_1)
+                    disabled = true;
+                if (maxDate_1 && cellDate > maxDate_1)
+                    disabled = true;
+                if (disabled) {
+                    btn.setAttribute('disabled', 'true');
+                    td.setAttribute('data-out-of-range', 'true');
+                }
+                else {
+                    btn.removeAttribute('disabled');
+                    td.removeAttribute('data-out-of-range');
+                }
+            });
+        }
+    };
+    /**
+     * Opens the datepicker dropdown.
+     */
+    KTDatepicker.prototype.open = function () {
+        if (this._unifiedStateManager.isDropdownOpen()) {
+            console.log('🗓️ [KTDatepicker] open() skipped: already open');
+            return;
+        }
+        if (this._config.disabled) {
+            console.log('🗓️ [KTDatepicker] open() blocked: datepicker is disabled');
+            return;
+        }
+        console.log('🗓️ [KTDatepicker] open() called, attempting to open dropdown');
+        // Use unified state management
+        var success = this._unifiedStateManager.setDropdownOpen(true, 'datepicker-open');
+        if (!success) {
+            console.log('🗓️ [KTDatepicker] open() blocked by state validation');
+            return;
+        }
+        console.log('🗓️ [KTDatepicker] State manager open() successful, dropdown module:', this._dropdownModule);
+        // Ensure dropdown content is rendered before opening
+        var dropdownEl = this._element.querySelector('[data-kt-datepicker-dropdown]');
+        if (dropdownEl) {
+            // Always render dropdown content to ensure it's up to date
+            console.log('🗓️ [KTDatepicker] Rendering dropdown content before opening');
+            this._renderDropdownContent(dropdownEl);
+        }
+        // Use dropdown module if available
+        if (this._dropdownModule) {
+            console.log('🗓️ [KTDatepicker] Dropdown module available, state change will trigger open');
+            // The dropdown module will automatically open via observer pattern
+        }
+        else {
+            console.log('🗓️ [KTDatepicker] No dropdown module, using fallback');
+        }
+        // Don't call _render() here as it recreates the dropdown module
+        // The dropdown module handles its own visibility
+    };
+    /**
+     * Closes the datepicker dropdown.
+     */
+    KTDatepicker.prototype.close = function () {
+        var _a;
+        console.log('🗓️ [KTDatepicker] close() called, current state:', {
+            stateManagerOpen: this._unifiedStateManager.isDropdownOpen(),
+            dropdownModuleOpen: (_a = this._dropdownModule) === null || _a === void 0 ? void 0 : _a.isOpen(),
+            stateManagerState: this._unifiedStateManager.getDropdownState()
         });
+        if (!this._unifiedStateManager.isDropdownOpen()) {
+            console.log('🗓️ [KTDatepicker] close() skipped: already closed');
+            return;
+        }
+        // Debug log with stack trace
+        console.log('[KTDatepicker] close() called. Dropdown will close. Stack trace:', new Error().stack);
+        // Use unified state management
+        var success = this._unifiedStateManager.setDropdownOpen(false, 'datepicker-close');
+        if (!success) {
+            console.log('🗓️ [KTDatepicker] close() blocked by state validation');
+            return;
+        }
+        console.log('🗓️ [KTDatepicker] State manager close() successful');
+        // Use dropdown module if available
+        if (this._dropdownModule) {
+            console.log('🗓️ [KTDatepicker] Dropdown module available, state change will trigger close');
+            // The dropdown module will automatically close via observer pattern
+        }
+        else {
+            console.log('🗓️ [KTDatepicker] No dropdown module, using fallback');
+        }
+        // Don't call _render() here as it recreates the dropdown module
+        // The dropdown module handles its own visibility
+    };
+    KTDatepicker.prototype.toggle = function () {
+        if (this._unifiedStateManager.isDropdownOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
     };
     /**
-     * Initialize all datepickers on the page
+     * Returns whether the datepicker dropdown is currently open.
      */
-    KTDatepicker.init = function () {
-        KTDatepicker.createInstances();
+    KTDatepicker.prototype.isOpen = function () {
+        return this._unifiedStateManager.isDropdownOpen();
     };
     /**
-     * ========================================================================
-     * Static instances
-     * ========================================================================
+     * Returns the current state of the datepicker component.
      */
-    KTDatepicker._instances = new Map();
+    KTDatepicker.prototype.getState = function () {
+        return __assign({}, this._unifiedStateManager.getState());
+    };
+    /**
+     * Returns the current dropdown state.
+     */
+    KTDatepicker.prototype.getDropdownState = function () {
+        return this._unifiedStateManager.getDropdownState();
+    };
+    /**
+     * StateObserver implementation: Called when state changes
+     */
+    /**
+     * StateObserver implementation: Returns update priority (lower = higher priority)
+     */
+    KTDatepicker.prototype.getUpdatePriority = function () {
+        return 10; // Medium priority
+    };
+    /**
+     * StateObserver implementation: Handle state changes from unified state manager
+     */
+    KTDatepicker.prototype.onStateChange = function (newState, oldState) {
+        this._handleStateChange(newState, oldState);
+    };
+    /**
+     * Handle state changes from the unified state manager
+     */
+    KTDatepicker.prototype._handleStateChange = function (newState, oldState) {
+        console.log('🗓️ [KTDatepicker] _handleStateChange called:', { newState: newState, oldState: oldState });
+        // Skip UI updates if this is from segmented input arrow navigation
+        if (typeof window !== 'undefined' && window.__ktui_segmented_input_arrow_navigation) {
+            console.log('🗓️ [KTDatepicker] Skipping UI update due to segmented input navigation');
+            return;
+        }
+        // Get changed properties for selective updates
+        var changedProperties = this._unifiedStateManager.getLastChangedProperties();
+        // Get the source of the last state update
+        var lastUpdateSource = this._unifiedStateManager.getLastUpdateSource();
+        // Update dropdown state if open/closed changed
+        if (changedProperties.has('isOpen') && newState.isOpen !== oldState.isOpen) {
+            if (this._dropdownModule) {
+                console.log('🗓️ [KTDatepicker] Dropdown module available, state change will trigger open');
+                // The dropdown module will automatically open via observer pattern
+            }
+            else {
+                console.log('🗓️ [KTDatepicker] No dropdown module, using fallback');
+            }
+            // Don't call _render() here as it recreates the dropdown module
+            // The dropdown module handles its own visibility
+        }
+        // Update disabled state only if it changed
+        if (changedProperties.has('isDisabled') && newState.isDisabled !== oldState.isDisabled) {
+            this._updateDisabledState();
+        }
+        // Selective UI updates based on changed properties
+        // Update input field only if selection-related properties changed
+        if (changedProperties.has('selectedDate') ||
+            changedProperties.has('selectedRange') ||
+            changedProperties.has('selectedDates') ||
+            changedProperties.has('selectedRange.start') ||
+            changedProperties.has('selectedRange.end')) {
+            this._updateInput(newState);
+        }
+        // Update segmented input only if selectedDate changed (and not from segmented input itself)
+        if (this._config.range) {
+            if ((changedProperties.has('selectedRange') ||
+                changedProperties.has('selectedRange.start') ||
+                changedProperties.has('selectedRange.end')) &&
+                lastUpdateSource !== 'range-selection') {
+                this._updateRangeSegmentedInput(newState);
+            }
+            else if (lastUpdateSource === 'range-selection') {
+                console.log('🗓️ [KTDatepicker] Skipping _updateRangeSegmentedInput to preserve focus during typing');
+            }
+        }
+        else {
+            if (changedProperties.has('selectedDate') && lastUpdateSource !== 'segmented-input') {
+                this._updateSegmentedInput(newState);
+            }
+            else if (lastUpdateSource === 'segmented-input') {
+                console.log('🗓️ [KTDatepicker] Skipping _updateSegmentedInput to preserve focus during typing');
+            }
+        }
+        // Update calendar highlighting only if selection state changed
+        if (changedProperties.has('selectedDate') ||
+            changedProperties.has('selectedRange') ||
+            changedProperties.has('selectedRange.start') ||
+            changedProperties.has('selectedRange.end') ||
+            changedProperties.has('selectedDates') ||
+            changedProperties.has('currentDate')) {
+            this._updateCalendar(newState);
+        }
+        // Update time picker only if selectedTime changed
+        if (changedProperties.has('selectedTime')) {
+            this._updateTimePicker(newState);
+        }
+        // Fire events based on state changes
+        this._fireEvents(newState, oldState);
+        // Start observing for dynamic element creation
+        this._startElementObservation();
+    };
+    // Static init method for auto-initialization
+    KTDatepicker.init = function () {
+        var elements = document.querySelectorAll('[data-kt-datepicker]');
+        elements.forEach(function (el) {
+            if (!el.instance) {
+                new KTDatepicker(el);
+            }
+        });
+    };
     return KTDatepicker;
 }(KTComponent));
 export { KTDatepicker };
+// Optionally, export a static init method for auto-initialization
+export function initDatepickers() {
+    var elements = document.querySelectorAll('[data-kt-datepicker]');
+    elements.forEach(function (el) {
+        if (!el.instance) {
+            new KTDatepicker(el);
+        }
+    });
+}
 //# sourceMappingURL=datepicker.js.map