About Tailwind CSS Date Picker

Hi Xin Yu,

Understanding

You're using Metronic 9 in a SPA setup and need to manually initialize the DatePicker after dynamic content loads — similar to how KTSelect.getOrCreateInstance() or KTSelect.init() works.

Solution

The DatePicker auto-initializes on page load for elements with data-kt-date-picker="true". For SPA, the approach depends on your framework:

If using Livewire: KTUI already has built-in support — it listens for livewire:navigate events and re-initializes all components automatically. No extra code needed.

For other SPA frameworks (Vue Router, React Router, Inertia, etc.): After your route change completes and the new DOM is rendered, you can re-trigger initialization by calling:

// Re-init all KTUI components (including Select, Modal, etc.)
KTComponents.init();

To interact with an existing DatePicker instance (e.g. after it's initialized):

const picker = KTDatePicker.getInstance(document.getElementById('my-date-picker'));
picker.show();   // open calendar
picker.hide();   // close calendar
picker.reset();  // clear selection
const dates = picker.getSelectedDates();
const calendar = picker.getCalendar(); // underlying vanilla-calendar-pro instance

Note: KTDatePicker is part of the Metronic template (not the open-source KTUI library), so getOrCreateInstance may or may not be available — check your Metronic source for the exact static methods.

Sources

• Date Picker Docs

Next Steps

If KTComponents.init() doesn't pick up your dynamically added DatePicker, check the Metronic template source for a KTDatePicker.init() or KTDatePicker.createInstances() static method. You can also try calling it after a short requestAnimationFrame delay to ensure the DOM is fully settled.

This reply was generated by AI. A human will follow up if needed.