¿Cómo establecer la configuración regional en DatePipe en Angular 2?

Quiero mostrar la fecha con el formato europeo, dd/MM/yyyypero con el formato DatePipe shortDate solo se muestra con el estilo de fecha de EE MM/dd/yyyy. UU .
Supongo que esa configuración regional predeterminada es en_US. Tal vez me faltan los documentos, pero ¿cómo puedo cambiar la configuración regional predeterminada en una aplicación Angular2? ¿O tal vez hay alguna forma de pasar un formato personalizado a DatePipe?

A partir de Angular2 RC6, puede establecer la configuración regional predeterminada en el módulo de su aplicación, agregando un proveedor:

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: "en-US" }, //replace "en-US" with your locale
    //otherProviders...
  ]
})

Las tuberías Moneda / Fecha / Número deben recoger la configuración regional. LOCALE_ID es un OpaqueToken , que se importará desde angular / core.

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

Para un caso de uso más avanzado, es posible que desee elegir la configuración regional de un servicio. La configuración regional se resolverá (una vez) cuando se cree el componente que usa la tubería de fecha:

{
  provide: LOCALE_ID,
  deps: [SettingsService],      //some service handling global settings
  useFactory: (settingsService) => settingsService.getLanguage()  //returns locale string
}

Espero que funcione para ti.

La solución con LOCALE_ID es excelente si desea configurar el idioma de su aplicación una vez. Pero no funciona, si desea cambiar el idioma durante el tiempo de ejecución. Para este caso, puede implementar una tubería de fecha personalizada.

import { DatePipe } from '@angular/common';
import { Pipe, PipeTransform } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Pipe({
  name: 'localizedDate',
  pure: false
})
export class LocalizedDatePipe implements PipeTransform {

  constructor(private translateService: TranslateService) {
  }

  transform(value: any, pattern: string = 'mediumDate'): any {
    const datePipe: DatePipe = new DatePipe(this.translateService.currentLang);
    return datePipe.transform(value, pattern);
  }

}

Ahora, si cambia el idioma de visualización de la aplicación utilizando TranslateService (consulte ngx-translate )

this.translateService.use('en');

los formatos dentro de su aplicación deberían actualizarse automáticamente.

Ejemplo de uso:

<p>{{ 'note.created-at' | translate:{date: note.createdAt | localizedDate} }}</p>
<p>{{ 'note.updated-at' | translate:{date: note.updatedAt | localizedDate:'fullDate'} }}</p>

o mira mi simple proyecto "Notas" aquí .

Con angular5 la respuesta anterior ya no funciona!

El siguiente código:

app.module.ts

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: "de-at" }, //replace "de-at" with your locale
    //otherProviders...
  ]
})

Conduce al siguiente error:

Error: Faltan datos de configuración regional para la configuración regional "de-at".

Con angular5usted debe cargar y registrar el archivo de configuración regional utilizado por su cuenta.

app.module.ts

import { NgModule, LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localeDeAt from '@angular/common/locales/de-at';

registerLocaleData(localeDeAt);

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: "de-at" }, //replace "de-at" with your locale
    //otherProviders...
  ]
})

Documentación

Si usa TranslateServicedesde @ngx-translate/core, a continuación se muestra una versión sin crear una nueva tubería que funcione con el cambio dinámico en tiempo de ejecución (probado en Angular 7). Usando el localeparámetro de DatePipe ( docs ):

Primero, declare las configuraciones regionales que usa en su aplicación, por ejemplo, en app.component.ts:

import localeIt from '@angular/common/locales/it';
import localeEnGb from '@angular/common/locales/en-GB';
.
.
.
ngOnInit() {
    registerLocaleData(localeIt, 'it-IT');
    registerLocaleData(localeEnGb, 'en-GB');
}

Luego, use su tubería dinámicamente:

myComponent.component.html

<span>{{ dueDate | date: 'shortDate' : '' : translateService.currentLang }}</span>

myComponent.component.ts

 constructor(public translateService: TranslateService) { ... }

He echado un vistazo en date_pipe.ts y tiene dos bits de información que son de interés. cerca de la parte superior están las siguientes dos líneas:

// TODO: move to a global configurable location along with other i18n components.
var defaultLocale: string = 'en-US';

Cerca del fondo está esta línea:

return DateFormatter.format(value, defaultLocale, pattern);

Esto me sugiere que la fecha está actualmente codificada para ser 'en-US'.

Por favor, ilumíneme si estoy equivocado.

En app.module.ts agregue las siguientes importaciones. Hay una lista de opciones LOCALE aquí .

import es from '@angular/common/locales/es';
import { registerLocaleData } from '@angular/common';
registerLocaleData(es);

Luego agregue el proveedor

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: "es-ES" }, //your locale
  ]
})

Use tuberías en html. Aquí está la documentación angular para esto.

{{ dateObject | date: 'medium' }}

Haces algo como esto:

{{ dateObj | date:'shortDate' }}

o

{{ dateObj | date:'ddmmy' }}

Ver: https://angular.io/docs/ts/latest/api/common/index/DatePipe-pipe.html

Estaba luchando con el mismo problema y no funcionó para mí usando esto

{{dateObj | date:'ydM'}}

Entonces, probé una solución alternativa, no la mejor solución, pero funcionó:

{{dateObj | date:'d'}}/{{dateObj | date:'M'}}/{{dateObj | date:'y'}}

Siempre puedo crear una tubería personalizada.

Para aquellos que tienen problemas con AOT, debe hacerlo de manera un poco diferente con useFactory:

export function getCulture() {
    return 'fr-CA';
}

@NgModule({
  providers: [
    { provide: LOCALE_ID, useFactory: getCulture },
    //otherProviders...
  ]
})

Copié el google pipe, cambié la configuración regional y funciona para mi país, es posible que no lo terminen para todas las configuraciones regionales. Debajo está el código.

import {
    isDate,
    isNumber,
    isPresent,
    Date,
    DateWrapper,
    CONST,
    isBlank,
    FunctionWrapper
} from 'angular2/src/facade/lang';
import {DateFormatter} from 'angular2/src/facade/intl';
import {PipeTransform, WrappedValue, Pipe, Injectable} from 'angular2/core';
import {StringMapWrapper, ListWrapper} from 'angular2/src/facade/collection';


var defaultLocale: string = 'hr';

@CONST()
@Pipe({ name: 'mydate', pure: true })
@Injectable()
export class DatetimeTempPipe implements PipeTransform {
    /** @internal */
    static _ALIASES: { [key: string]: String } = {
        'medium': 'yMMMdjms',
        'short': 'yMdjm',
        'fullDate': 'yMMMMEEEEd',
        'longDate': 'yMMMMd',
        'mediumDate': 'yMMMd',
        'shortDate': 'yMd',
        'mediumTime': 'jms',
        'shortTime': 'jm'
    };


    transform(value: any, args: any[]): string {
        if (isBlank(value)) return null;

        if (!this.supports(value)) {
            console.log("DOES NOT SUPPORT THIS DUEYE ERROR");
        }

        var pattern: string = isPresent(args) && args.length > 0 ? args[0] : 'mediumDate';
        if (isNumber(value)) {
            value = DateWrapper.fromMillis(value);
        }
        if (StringMapWrapper.contains(DatetimeTempPipe._ALIASES, pattern)) {
            pattern = <string>StringMapWrapper.get(DatetimeTempPipe._ALIASES, pattern);
        }
        return DateFormatter.format(value, defaultLocale, pattern);
    }

    supports(obj: any): boolean { return isDate(obj) || isNumber(obj); }
}

Ok, propongo esta solución, muy simple, usando ngx-translate

import { DatePipe } from '@angular/common';
import { Pipe, PipeTransform } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Pipe({
  name: 'localizedDate',
  pure: false
})
export class LocalizedDatePipe implements PipeTransform {

  constructor(private translateService: TranslateService) {
}

  transform(value: any): any {
    const date = new Date(value);

    const options = { weekday: 'long',
                  year: 'numeric',
                  month: 'long',
                  day: 'numeric',
                  hour: '2-digit',
                  minute: '2-digit',
                  second: '2-digit'
                    };

    return date.toLocaleString(this.translateService.currentLang, options);
  }

}

Esto podría ser un poco tarde, pero en mi caso (angular 6), creé una tubería simple encima de DatePipe, algo así:

private _regionSub: Subscription;
private _localeId: string;

constructor(private _datePipe: DatePipe, private _store: Store<any>) {
  this._localeId = 'en-AU';
  this._regionSub = this._store.pipe(select(selectLocaleId))
    .subscribe((localeId: string) => {
      this._localeId = localeId || 'en-AU';
    });
}

ngOnDestroy() { // Unsubscribe }

transform(value: string | number, format?: string): string {
  const dateFormat = format || getLocaleDateFormat(this._localeId, FormatWidth.Short);
  return this._datePipe.transform(value, dateFormat, undefined, this._localeId);
}

Puede que no sea la mejor solución, pero simple y funciona.