How to change date format in ngbDatepicker input field in angular bootstrap?

Question

HTML:-

      <li><span class="float-left label">Date of birth</span>
        <div class="float-right fill-text position-relative edit-calender">
          <input type="text" (click)="d.toggle()" class="edit-field"
            [outsideDays]="'collapsed'" id="datePicker" ngbDatepicker formControlName="dob" #d="ngbDatepicker" [minDate]="minDate"
            [maxDate]="maxDate" readonly>
          <span class="calendar" id="calIcon" (click)="waitAndToggle();"><i id="calIcon" class="far fa-calendar-alt"></i></span>
          <div class="text-danger" *ngIf="form.get('dob').hasError('required')
                && ( form.get('dob').touched || formSubmitAttempt)">
            {{ 'Validations.dob' | translate }}
          </div>
        </div>
      </li>

Now when I select some date, it set as YYYY-MM-DD format but I need to change in other format (MM-DD-YYYY or DD-MM-YYY). Check its node_modules folder but didn't git any solution for the same.

I checked the gist https://gist.github.com/nrobinaubertin/61ff1c3db355c74f4e56f485b566ab22 but this didn't set the value in input field as DD-MM-YYYY.

Answer 1

To use a class that extends a NbgDateParserFormat you must include it in app.module in providers,

@NgModule({
  declarations: [
    AppComponent,
    ...  
  ],
  imports: [
    BrowserModule,
    NgbModule,
    ...
  ],
  providers: [
    { provide: NgbDateParserFormatter, useClass: DateParserFormatter },
    ...

  ],
  bootstrap: [AppComponent]
})