Hi

1. Getting values
- The component writes the chosen date(s) into the input’s value, so you can:
Use the input in a normal form and read it on submit, or
Read inputElement.value anytime for the display string (e.g. formatted with data-kt-date-picker-format).
- For raw date strings (YYYY-MM-DD) in code, use the instance API:
KTDatePicker.getInstance(inputElement).getSelectedDates()
Returns an array of strings, e.g. ['2025-02-04'] for a single date or ['2025-02-01', '2025-02-04'] for a range. Use the input DOM element (or a selector) that has data-kt-date-picker.

2. Using it in forms (e.g. Angular)
- Bind your form control to the same input that has data-kt-date-picker. The component only updates that input’s value, so your form control stays in sync if it’s bound to that input (e.g. with formControlName or ngModel).
- If you need to update the form programmatically when the user picks a date, listen for the DOM event:
kt.date-picker.change — fired when the selection changes (and the input value is updated).
kt.date-picker.apply — fired when the user clicks Apply (only when data-kt-date-picker-action-buttons="true").
- In the listener you can read the input’s value or call getSelectedDates() and then patch your form control.

- Re-init after new markup: If you add new date-picker inputs later (e.g. after route change or opening a modal), run KTDatePicker.createInstances() again so the new elements are initialised. Existing instances are not duplicated.
- Initial value: You can set a default by giving the input a value and/or using data-kt-date-picker-selected-dates (see the Date Picker docs) so the calendar shows the correct selection when it opens.

Hello, it's me again.

I was able to get the DatePicker to work, I had to do the process again by following the instructions and doing the manual activation as you shared with me
And this one worked in the template downloaded from 0 and in my project I don't, so I'm just checking what I did wrong or omitted, in the worst case I just have to move from one project to another. Thank you very much for the explanation and attention.

My Project:
<img src=" />

New Project:
<img src=" />

Hello Faizal

I already imported everything from the template, I have the metronic (dist) folder inside src, as it says in the documentation and in the components if it has date-picker

What without

add in 'ngAfterViewInit' in my form component,

ngAfterViewInit(){

  console.log("ExperienceFormComponent ngAfterViewInit");

  setTimeout(() => (window as any). KTDatePicker?. createInstances(), 0);

}

<div class="kt-input w-48">

  <i class="ki-outline ki-calendar">

  </i>

  <input class="grow" data-kt-date-picker="true" data-kt-date-picker-input-mode="true" data-kt-date-picker-position-to-input="center"  placeholder="Position center" readonly="" type="text" />

</div>

ngAfterViewInit(): void {

  this.metronicInitService.init();

}

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);

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.