How to add additional text into displayed date in ion-datetime in Angular?

Question

We have below datetime in Angular and it works just fine:

<ion-item mode="md">
    <ion-datetime
        *ngIf="showDatetimePicker"
        [disabled]="!dateDetails.isEditable || isEditable"
        [pickerOptions]="getCustomPickerOptions()"
        [value]="dateDetails.dateUnix * 1000 | appointmentDate"
        mode="md"
        [min]="minDate"
        [yearValues]="yearValues"
        [hourValues]="hourValues"
        [displayFormat]="displayFormat"
        [pickerFormat]="pickerFormat"
        placeholder="{{ 'appointments.details.dates.form.placeholder' | translate }}"
    ></ion-datetime>
</ion-item>

We are passing different display formats based on logic. And in one case passed display format is 'DDD, MMM D, YYYY @ hA'. And for such input it displays: Thu, Jun 1, 2023 @ 8AM

Now, based on hourValues I should add some data and render it as:

Thu, Jun 1, 2023 @ 8AM - 16AM

How I can do it?

I tried to find similar question in Google and not found. Checked also full documentation of ionic and it doesn't support it natively. ChatGpt offered some solutions and none works.