DatePicker component does not work
Hi, I'm recently trying to use the DatePicker that comes in the https://keenthemes.com/metronic/tailwind/docs/components/date-picker url.
already installed the 'Vanilla Calendar Pro' library but it doesn't work.
For the installation I followed all the steps of the url: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/angular
I don't have any errors when compiling or in the browser console, only the input is displayed correctly, but it doesn't open the calendar.
If I could get a little feedback on something I might do wrong, thank you very much. 
Replies (2)
Hi
The Date Picker is a manual JS component: it only works after KTDatePicker.createInstances() runs when the element is already in the DOM. In Angular, views (and modals) render after the first load, so a single run on app bootstrap often runs before your date-picker input exists. That’s why the input appears but the calendar doesn’t open.
After the template that contains the date-picker input is rendered, call:
KTDatePicker.createInstances()
so the script can find [data-kt-date-picker] and attach the calendar. In Angular you can do this:
In the component that hosts the date picker: call it from ngAfterViewInit, e.g. in a short setTimeout so the DOM is fully updated:
setTimeout(() => (window as any).KTDatePicker?.createInstances(), 0);Or from a shared “scripts init” that runs after navigation or modal open, as long as it runs after the date-picker markup is in the document.
The bundle or script that defines KTDatePicker (and that runs createInstances) must be loaded in your Angular app. If you only installed vanilla-calendar-pro and didn’t add the Metronic/KT wrapper that provides KTDatePicker and its data-kt-date-picker behaviour, the calendar won’t initialise. Confirm in the Angular integration docs or your theme package how to include the “components” or “date-picker” script so KTDatePicker is available on window (or as an import) and then call createInstances as above.
Metronic Tailwind components often rely on manual JS initialization. It may help to double-check whether the DatePicker requires calling a specific function or importing a helper script, especially when used inside Angular instead of plain HTML.
