Unable to convert "13/7/2021" into a date' for pipe DatePipe in Angular 11

Question

In my angular form I have used Angular Bootstrap Datepicker control to select date. After selecting date from datepicker, the date format I get from the control is "dd-MM-yyyy". Now I would like to format the date to "yyyy-MMM-dd" format. So I have used DatePipe Pipe. But the pipe can convert the date if date is selected 1-12 date. But if I choose 13 date of any month it can't convert the date to the specified format which I want.

Another problem is even I choose 1-12 date of any month, after format the pipe mismatches the date and month. For example if I choose "2nd July, 2021". Then it converts the date to "2021-Feb-07" which is not correct.

Now I want two things to be correct.

First, If I choose 1-12 date of any month then the pipe should convert the date correctly. It means If I choose "2nd July, 2021" then after convert I should get "2021-Jul-02" NOT "2021-Feb-07"

Secondly, If I choose more than 12 date of any month then it should not throw the exception which is: "Unable to convert "13/7/2021" into a date' for pipe DatePipe"

Bellow is my HTML code for datepicker and datetime pipe for tranforming the date. I have also used two service for my datepicker.

<div class="input-group">
    <input class="form-control" placeholder="dd-mm-yyyy" id="startDate" name="startDate"
        formControlName="startDate" [(ngModel)]="selectedStartDate" ngbDatepicker
        #d="ngbDatepicker" [ngClass]="{ 'is-invalid': submitted && f.startDate.errors }">
    <div class="input-group-append">
        <button class="btn btn-outline-secondary calendar" (click)="d.toggle()"
            type="button"></button>
    </div>
    <span *ngIf="submitted && f.startDate.errors" class="invalid-feedback">
        <span *ngIf="f.startDate.errors.required">Start date is required</span>
    </span>
</div>

Date Pipe:

let latest_date =this.datePipe.transform(this.selectedStartDate, 'yyyy-MMM-dd');

Service for datepicker

import { Injectable } from '@angular/core';
import { NgbDateAdapter, NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';

/**
 * This Service handles how the date is represented in scripts i.e. ngModel.
 */
@Injectable()
export class CustomAdapter extends NgbDateAdapter<string> {

    readonly DELIMITER = '/';

    fromModel(value: string | null): NgbDateStruct | null {
        if (value) {
            let date = value.split(this.DELIMITER);
            return {
                day: parseInt(date[0], 10),
                month: parseInt(date[1], 10),
                year: parseInt(date[2], 10)
            };
        }
        return null;
    }

    toModel(date: NgbDateStruct | null): string | null {
        return date ? date.day + this.DELIMITER + date.month + this.DELIMITER + date.year : null;
    }
}


/**
 * This Service handles how the date is rendered and parsed from keyboard i.e. in the bound input field.
 */
@Injectable()
export class CustomDateParserFormatter extends NgbDateParserFormatter {

    readonly DELIMITER = '-';

    parse(value: string): NgbDateStruct | null {
        if (value) {
            let date = value.split(this.DELIMITER);
            return {
                day: parseInt(date[0], 10),
                month: parseInt(date[1], 10),
                year: parseInt(date[2], 10)
            };
        }
        return null;
    }

    format(date: NgbDateStruct | null): string {
        let dDay = "";
        let mMonth = "";

        if (date !== null) {
            if (date.day <= 9) {
                dDay = "0" + date.day;
            }
            else {
                dDay = (date.day).toString();
            }

            if (date.month <= 9) {
                mMonth = "0" + date.month;
            }
            else {
                mMonth = (date.month).toString();
            }
        }

        //return date ? date.day + this.DELIMITER + date.month + this.DELIMITER + date.year : '';
        return date ? dDay + this.DELIMITER + mMonth + this.DELIMITER + date.year : '';
    }
}