Angular Bootstrap Datepicker custom date format dd-MMM-yyyy (e.g., "01-Sep-2023")

Question

I have also use NgbDateParserFormatter but not solve this problem date format - dd-MMM-yyyy (e.g., "01-Sep-2023")

component.html

<div class="input-group">
            <input
                class="form-control"
                placeholder="yyyy-mm-dd"
                name="dp"
                [(ngModel)]="model"
                ngbDatepicker
                #d="ngbDatepicker"
            />
            <button class="btn btn-outline-secondary bi bi-calendar3" (click)="d.toggle()" type="button"></button>
        </div>

Model: {{ model | json }}

Result

Model: {
  "year": 2023,
  "month": 9,
  "day": 21
}
    

component.ts

import { Component } from '@angular/core';
import { NgbAlertModule, NgbDatepickerModule, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
import { FormsModule } from '@angular/forms';
import { JsonPipe } from '@angular/common';

@Component({
    selector: 'ngbd-datepicker-popup',
    standalone: true,
    imports: [NgbDatepickerModule, NgbAlertModule, FormsModule, JsonPipe],
    templateUrl: './datepicker-popup.html',
})
export class NgbdDatepickerPopup {
    model: NgbDateStruct;
}

Refernce: https://ng-bootstrap.github.io/#/components/datepicker/overview