Exemple of ngb-date-parser-formatter implementation (ng-bootstrap)

app.component.ts

import { NgbDatepickerConfig, NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
import { NgbDateFRParserFormatter } from "./ngb-date-fr-parser-formatter"

@Component({
    providers: [{provide: NgbDateParserFormatter, useClass: NgbDateFRParserFormatter}]
})
export class AppComponent {}

ngb-date-fr-parser-formatter.ts

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

function padNumber(value: number) {
    if (isNumber(value)) {
        return `0${value}`.slice(-2);
    } else {
        return "";
    }
}

function isNumber(value: any): boolean {
    return !isNaN(toInteger(value));
}

function toInteger(value: any): number {
    return parseInt(`${value}`, 10);
}


@Injectable()
export class NgbDateFRParserFormatter extends NgbDateParserFormatter {
    parse(value: string): NgbDateStruct {
        if (value) {
            const dateParts = value.trim().split('/');
            if (dateParts.length === 1 && isNumber(dateParts[0])) {
                return {year: toInteger(dateParts[0]), month: null, day: null};
            } else if (dateParts.length === 2 && isNumber(dateParts[0]) && isNumber(dateParts[1])) {
                return {year: toInteger(dateParts[1]), month: toInteger(dateParts[0]), day: null};
            } else if (dateParts.length === 3 && isNumber(dateParts[0]) && isNumber(dateParts[1]) && isNumber(dateParts[2])) {
                return {year: toInteger(dateParts[2]), month: toInteger(dateParts[1]), day: toInteger(dateParts[0])};
            }
        }   
        return null;
    }

    format(date: NgbDateStruct): string {
        let stringDate: string = ""; 
        if(date) {
            stringDate += isNumber(date.day) ? padNumber(date.day) + "/" : "";
            stringDate += isNumber(date.month) ? padNumber(date.month) + "/" : "";
            stringDate += date.year;
        }
        return stringDate;
    }
}

Wow thank you MISTER!

Thanks a lot!

ok for me, thanks a lot !

This was a helpful gist. Here's a dd-MM-yyyy spinoff:

// Formatter using "dd-MM-yyyy" string format:
class NgbDateStringParserFormatter extends NgbDateParserFormatter {
  parse(value: string): NgbDateStruct {
    if (!value) { return null; }

    const parts = value.trim().split('-');
    
    return {
      day: parts.length > 0 ? parseInt(parts[0], 10) : null,
      month: parts.length > 1 ? parseInt(parts[1], 10) : null,
      year: parts.length > 2 ? parseInt(parts[2], 10) : null,
    };
  }

  format(date: NgbDateStruct): string {
    const pad = (n) => Number.isInteger(n) ? ('0' + n).substr(-2) : '';
    return date ? `${pad(date.day)}-${pad(date.month)}-${date.year}` : '';
  }
}

You might need to polyfill or change the usage of Number.isInteger depending on your browser support.

Thank you @nrobinaubertin !

Thank for the second post from the top.... works like a charm....... just started working with Angular ... can't believe people have been using it since 2 years

Very usefull, thanks

Thanks!

Thanks!

MANY THANKS, BROS

Excellent it still working

Great. Thanks, man !!!

Awesome! Thank you!

thanks a lot

Awesome! Thanks a lot.

Modified the code for my own implementation for the Custom DateFormat with MomentJS.

https://gist.github.com/nowsathns/d8dd998b16109e5d5dce6b6086a65c6d

Thanks!

ho do you implement this in the html file?

Perfect!

Perfect!
Thanks for sharing.

Works like a charm! Thanks!!

Thanks dude..

Beautiful :) thanks!

Great Its works.. Thanks

waoo!!! its great. thanks a lot.....

Thanks a lot

Thank you so much!!!

Thank you so much. It worked like a charm

Thank you so much..

I'm getting this error: Uncaught TypeError: Class constructor NgbDateParserFormatter cannot be invoked without 'new'. Anyone here with the same problem ?