Formateando Selector de fechas en Angular

English version: https://dev.to/amatosg/customize-date-picker-in-angular-4323

Cuando se manejan fechas, el formato es crucial para que nos podamos entender correctamente: 12/01/2020 no es lo mismo que 01/12/2020.

Esto nos dice que un campo de fecha, es realmente importante. Con Angular, esto puede ser complicado, ya que NgbDateParserFormatter mostrará las fechas con el formato yyyy-MM-dd:

Estuve procastinando con esto durante mucho tiempo, así que decidí tomar cartas en el asunto y mostrar el formato correcto (el que todos deberían usar): dd/MM/yyyy

Custom Formatter

Lo que necesitamos hacer es crear un archivo, yo lo llamé shared/component/ngb-custom-date-parser-formatter.ts y puse el siguiente código:

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

@Injectable()
export class NgbCustomDateParserFormatter extends NgbDateParserFormatter {

  constructor(private momentFormat: string) {
    super();
  };

  format(date: NgbDateStruct): string {
    if (date === null) {
      return '';
    }
    const d = moment({ year: date.year,
      month: date.month - 1,
      date: date.day });
    return d.isValid() ? d.format(this.momentFormat) : '';
  }

  parse(value: string): NgbDateStruct {
    if (!value) {
      return null;
    }
    const d = moment(value, this.momentFormat);
    return d.isValid() ? { year: d.year(),
      month: d.month() + 1,
      day: d.date() } : null;
  }
}

Luego, en mi app.module.ts agregué lo siguiente en la sección providers:

{
    provide: NgbDateParserFormatter,
    useValue: new NgbCustomDateParserFormatter("DD/MM/YYYY") // <== formato!
}

Y voila, a tu manera :)

PD: con suerte y esto llega al siguiente release de JHipster ;)