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

new date angular 4

Question

Quiero mostrar la fecha usando el formato europeo dd/mm/yyyy pero usando el formato DatePipe shortDate solo se muestra usando el estilo de fecha estadounidense mm/dd/yyyy .
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?

Answer 1

¡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 locales para la configuración regional "de-at".

Con angular5 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...
  ]
})

Documentation

Answer 2

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.

Answer 3

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); }
}

Answer 4

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

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 documentation angular para esto.

{{ dateObject | date: ''medium'' }}

Answer 5

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.

Answer 6

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.

Answer 7

Haces algo como esto:

{{ dateObj | date:''shortDate'' }}

o

{{ dateObj | date:''ddmmy'' }}

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

Answer 8

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 tubería de fecha está actualmente codificada para ser ''en-US''.

Por favor, ilumíneme si me equivoco.

Answer 9

La solución con LOCALE_ID es excelente si desea configurar el idioma para 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" here .

Answer 10

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);
  }

}

Answer 11

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...
  ]
})

Answer 12

Si usa TranslateService de @ngx-translate/core , a continuación se muestra una versión sin crear una nueva tubería que funcione con la conmutación dinámica en tiempo de ejecución (probado en Angular 7). Usando el parámetro de locale 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) { ... }