jQuery Datepicker in Angular2 application. Input format should differ from display format

Question

i'm trying to use a jQuery Datepicker in my angular application. From the server I get a date object, format yy-mm-dd. When I set this Format as "dateFormat" option my date is displayed right. But I like to get the following Format only for the UI: dd.mm.yy. When I set this format in the options the date 1959-12-31 results in 05.03.2022. And this is also the Format that I get from the datepicker if I click on the Save button. So the only working format is yy-mm-dd, it would be great if anyone can help me out. I tried a lot of other options and read a lot of other similiar questions here but I could not get any solution to work. I also tried a hidden input field to store the alternate value.

Here is my Angular component witch uses the jQuery picker:

import {forwardRef, Input, Output, EventEmitter, ViewChild, ElementRef, AfterViewInit, Component} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms";

const DATE_PICKER_VALUE_ACCESSOR = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => DatePicker),
  multi: true
};
declare var jQuery: any;

@Component({
  selector: 'jQueryDate',
  template: `<input #datePickerInput type="text">
<input type="hidden" id="datePickerAlternate" #datePickerAlternate>`,
  providers: [DATE_PICKER_VALUE_ACCESSOR]
})
export class DatePicker implements AfterViewInit {
  private onTouched = () => {
  };
  private onChange: (value: string) => void = () => {
  };

  @Input() options: any = {
    closeText: "Schließen",
    prevText: "&#x3C;Zurück",
    nextText: "Vor&#x3E;",
    currentText: "Heute",
    dateFormat: 'dd.mm.yy',
    isRTL: false,
    showMonthAfterYear: false,
    altField: "#datePickerAlternate",
    altFormat: "yy-mm-dd",
    dayNames: ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag"],
    monthNames: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
    dayNamesMin: ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"],
    weekHeader: "KW",
    firstDay: 0

  };

  @Input() value: Date;

  writeValue(date: Date) {
    console.log("datepicker value " + date);

    jQuery(this.input.nativeElement).datepicker('setDate', date);
    this.alternate.nativeElement.value = date;
    console.log("value of alternate: " + this.alternate.nativeElement.value);
  }

  registerOnChange(fn: any) {
    this.onChange = fn;
  }

  registerOnTouched(fn: any) {
    this.onTouched = fn;
  }

  @Output() dateChange = new EventEmitter();

  @ViewChild('datePickerInput') input: ElementRef;
  @ViewChild('datePickerAlternate') alternate: ElementRef;

  ngAfterViewInit() {
    jQuery(this.input.nativeElement).datepicker(Object.assign({}, this.options, {
      onSelect: (value) => {
        this.value = value;
        this.onChange(value);
        this.onTouched();
        this.alternate.nativeElement.value = value;

        this.dateChange.next(value);
      }
    }))
      .datepicker('setDate', this.value);

  }
}

And here is the use of the component:

  <jQueryDate class="" name="txtBirthdate" #txtBirthdate="ngModel" type="date" id="txtBirthdate"
                      [(ngModel)]="this.person.txtBirthdate"  ngDefaultControl></jQueryDate>