Technology discussions often emphasize the value of good planning, organization, and tools that make complex tasks easier to manage. The same idea applies to travel, where proper scheduling and reliable services can make a significant difference in the overall experience. For journeys that involve multiple destinations and important timings, dependable transportation helps everything run more smoothly. Well-organized travel arrangements, supported by Professional Umrah Drivers, can reduce stress, improve convenience, and allow travelers to focus on the purpose of their journey rather than the logistics.

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.