Tutorial To Change Date Format Ng-bootstrap Datepicker Angular 5

Here’s an easy way to change the date format on the ng-bootstrap datepicker angular 5. I got this way via ng-bootstrap official github and I have tested its success. If you use the ng-bootstrap module to run the css bootstrap framework component without jQuery, there are few constraints such as changing the date format according to the format you need. Ng-bootstrap implements ISO 8601 for date format. Follow this short tutorial

Read more: Tutorial Simple CRUD Angular 5 And Lumen 5.6 For Beginners

On the ng-bootstrap official site, datepicker has yyyy-mm-dd format, to change to “dd/mm/yyyy” you need to create a new class to extend the NgbDateParserFormatter class .

Create a new ts file named dateformat.ts and copy the following code

import { NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
import { Injectable } from '@angular/core';
import { isNumber, toInteger, padNumber } from '@ng-bootstrap/ng-bootstrap/util/util';

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

  format(date: NgbDateStruct): string {
    return date ?
        `${isNumber(date.day) ? padNumber(date.day) : ''}/${isNumber(date.month) ? padNumber(date.month) : ''}/${date.year}` :
        '';
  }
}

import { NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';

import { Injectable } from '@angular/core';

import { isNumber, toInteger, padNumber } from '@ng-bootstrap/ng-bootstrap/util/util';

@Injectable()

export class NgbDateCustomParserFormatter extends NgbDateParserFormatter {

parse(value: string): NgbDateStruct {

if (value) {

const dateParts = value.trim().split('/');

if (dateParts.length === 1 && isNumber(dateParts[0])) {

return {day: toInteger(dateParts[0]), month: null, year: null};

} else if (dateParts.length === 2 && isNumber(dateParts[0]) && isNumber(dateParts[1])) {

return {day: toInteger(dateParts[0]), month: toInteger(dateParts[1]), year: null};

} else if (dateParts.length === 3 && isNumber(dateParts[0]) && isNumber(dateParts[1]) && isNumber(dateParts[2])) {

return {day: toInteger(dateParts[0]), month: toInteger(dateParts[1]), year: toInteger(dateParts[2])};

}

return null;

}

format(date: NgbDateStruct): string {

return date ?

`${isNumber(date.day) ? padNumber(date.day) : ''}/${isNumber(date.month) ? padNumber(date.month) : ''}/${date.year}` :

'';

}

then import the class on the angular component that is using the datepicker.

import { NgbDateCustomParserFormatter} from '../../../../filter/dateformat';

1	import { NgbDateCustomParserFormatter} from '../../../../filter/dateformat';

Then add the provider to the component that will use the class

@Component({
  selector: '....',
  templateUrl: '....',
  styleUrls: ['....'],
  animations: [....],
  host: { '....' },
  providers: [
    {provide: NgbDateParserFormatter, useClass: NgbDateCustomParserFormatter}
   ]
})