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