KTDatepicker not initializing automatically or via API - Need help with date picker initialization

Hello Metronic Support Team,

I'm having issues with the KTDatepicker component not initializing properly. I've tried multiple approaches but none seem to work. Here's what I've discovered:

Environment:

• Metronic 9 Tailwind CSS
• Using ktui.min.js from assets/vendors/ktui/
• KTDatepicker is available as window.KTDatepicker (with lowercase 'p')

The Problem: The date picker doesn't initialize automatically when elements have data-kt-date-picker="true" attribute, and I cannot access instances programmatically.

What I've Tried:

1. Automatic Initialization:

   • Added data-kt-date-picker="true" attribute to input elements
   • Expected automatic initialization on page load (as per documentation)
   • Result: No initialization occurs

2. Using createInstances() and init():

   • Called KTDatepicker.createInstances() and KTDatepicker.init()
   • Both methods exist and execute without errors
   • Result: No instances are created or attached to elements

3. Checking Available Methods:

   • KTDatepicker has only two static methods: createInstances and init
   • No getInstance() method available (unlike other KT components)
   • Result: Cannot retrieve existing instances

4. Direct Instance Creation:

   • Tried new KTDatepicker(element) and new KTDatepicker(element, config)
   • Result: Need to verify if this works

5. Checking Element Properties:

   • Checked for element.ktDatePicker, element.KTDatePicker, element.ktDatepicker
   • Result: None of these properties exist on the element after initialization attempts

Code Example:

<!--begin::Date Range Input-->
<div class="kt-input w-64">
    <i class="ki-outline ki-calendar"></i>
    <input class="grow" 
           data-kt-date-picker="true" 
           data-kt-date-picker-action-buttons="true" 
           data-kt-date-picker-display-months-count="2" 
           data-kt-date-picker-input-mode="true" 
           data-kt-date-picker-months-to-switch="1" 
           data-kt-date-picker-position-to-input="left" 
           data-kt-date-picker-selection-dates-mode="multiple-ranged" 
           data-kt-date-picker-type="multiple" 
           id="date-range-input" 
           placeholder="Select date range" 
           readonly="" 
           type="text"/>
</div>
<!--end::Date Range Input-->

Scripts Loaded (in order):

1. assets/js/core.bundle.js
2. assets/vendors/ktui/ktui.min.js
3. assets/vendors/apexcharts/apexcharts.min.js
4. assets/js/layouts/demo1.js

Questions:

1. Should KTDatepicker.createInstances() automatically initialize all elements with data-kt-date-picker attribute on page load, or do I need to call it manually?
2. How can I programmatically access a date picker instance after initialization? (Other components like KTModal have getInstance() method)
3. Is there a specific initialization order or timing requirement for the date picker?
4. For dynamically shown elements (initially hidden with hidden class), do I need special handling?
5. What is the correct way to initialize a date picker instance programmatically when the element becomes visible?

Additional Context:

• The element is initially hidden and shown dynamically when user selects "Personalizado" option
• I need to capture date changes via event listeners
• I need to pre-populate the date picker with existing values

Any guidance or example code would be greatly appreciated!

Thank you, MATHEUS