Заполните значение ввода временем, выбранным на Clockpicker в Angular 14

Question

Я использую clockpicker, чтобы заставить пользователя выбрать время, которое он хочет, однако, я пытаюсь через пару дней выяснить, как получить значение выбранного времени и присвоить его соответствующему входному значению, но тщетно.

Итак, вот html-код. Там я также использую ngModel для отправки значения в файл .ts.

       <div>
    <mat-form-field appearance="outline">
      <mat-label>Select the start time</mat-label>
      <input
        appClockPicker
        #clockpicker="clockpicker"
        matInput
        placeholder="..."
        type="text"
        [(ngModel)]="selectedHours[0]"
      />
    </mat-form-field>
  </div>

Тогда это директива для отображения часов, но я не очень понимаю, как это работает, так как я новичок, и я копировал его откуда-то из Интернета. Так что думаю ошибка оттуда.

      import {
  AfterViewInit,
  Directive,
  ElementRef,
  NgZone,

} from "@angular/core";
declare var $: any;
declare var jQuery: any;

@Directive({
  selector: "[appClockPicker]",
  exportAs: "clockpicker",
})
export class ClockPickerDirective implements AfterViewInit {
  myDate: any;
  constructor(private el: ElementRef, private ngZone: NgZone) {}

  ngAfterViewInit(): void {
      this.ngZone.runOutsideAngular(() => {
        $(this.el.nativeElement).clockpicker({
          placement: '',
          align: "left",
          donetext: "Valider",
          onselect: (data:any) => {
            console.log(`data: ${data}`);
            
            this.ngZone.run((date) => {
              this.setTime(date);
              console.log(`date: ${date}`);
            });
          },
        })});
    
    ;}

  setTime(date) {
    this.myDate = date;
  }
}

Наконец, вот как это выглядит: выбранное время правильно отображается в поле ввода, хотя здесь введите описание изображения.