new - pipe angular date format

Formatee la fecha como dd/MM/aaaa utilizando tuberías

Question

Estoy usando el canal de date para formatear mi fecha, pero simplemente no puedo obtener el formato exacto que quiero sin una solución alternativa. ¿Estoy entendiendo mal las tuberías o simplemente no es posible?

//our root app component
import {Component} from ''angular2/core''

@Component({
  selector: ''my-app'',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <h3>{{date | date: ''ddMMyyyy''}}, should be 
      {{date | date: ''dd''}}/{{date | date:''MM''}}/{{date | date: ''yyyy''}}</h3>

    </div>
  `,
  directives: []
})
export class App {
  constructor() {
    this.name = ''Angular2''
    this.date = new Date();
  }
}

vista plnkr

Answer 1

Creo que es porque la configuración regional está codificada en DatePipe . Ver este enlace:

• https://github.com/angular/angular/blob/master/modules/%40angular/common/src/pipes/date_pipe.ts

Y no hay forma de actualizar esta configuración regional por configuración en este momento.

Answer 2

Error de formato de fecha de tubería corregido en Angular 2.0.0-rc.2, esta solicitud de extracción.

Ahora podemos hacer de la manera convencional:

{{valueDate | date: ''dd/MM/yyyy''}}

Ejemplos:

Versión actual:

Ejemplo angular 8.xx

Versiones antiguas:

Ejemplo angular 7.x

Ejemplo Angular 6.x

Ejemplo angular 4.x

Ejemplo angular 2.x

Más información en la documentación de DatePipe

Answer 3

Estoy usando esta solución temporal:

import {Pipe, PipeTransform} from "angular2/core";
import {DateFormatter} from ''angular2/src/facade/intl'';

@Pipe({
    name: ''dateFormat''
})
export class DateFormat implements PipeTransform {
    transform(value: any, args: string[]): any {
        if (value) {
            var date = value instanceof Date ? value : new Date(value);
            return DateFormatter.format(date, ''pt'', ''dd/MM/yyyy'');
        }
    }
}

Answer 4

Importe DatePipe desde angular / común y luego use el siguiente código:

var datePipe = new DatePipe();
    this.setDob = datePipe.transform(userdate, ''dd/MM/yyyy'');

donde userdate será su cadena de fecha. A ver si esto ayuda.

Tome nota de las minúsculas para la fecha y el año:

d- date
M- month
y-year

EDITAR

Debe pasar una cadena de locale como argumento a DatePipe, en el último angular. He probado en angular 4.x

Por ejemplo:

var datePipe = new DatePipe(''en-US'');

Answer 5

Las canalizaciones de fecha no se comportan correctamente en Angular 2 con el mecanografiado para el navegador Safari en MacOS e iOS. Me enfrenté a este problema recientemente. Tuve que usar moment js aquí para resolver el problema. Mencionando lo que he hecho en resumen ...

1. Agregue el paquete momentjs npm en su proyecto.

2. En xyz.component.html, (tenga en cuenta que startDateTime es de tipo de cadena de datos)

{{ convertDateToString(objectName.startDateTime) }}

3. En xyz.component.ts,

import * as moment from ''moment'';

''short'': equivalent to ''M/d/yy, h:mm a'' (6/15/15, 9:03 AM).
''medium'': equivalent to ''MMM d, y, h:mm:ss a'' (Jun 15, 2015, 9:03:01 AM).
''long'': equivalent to ''MMMM d, y, h:mm:ss a z'' (June 15, 2015 at 9:03:01 AM GMT+1).
''full'': equivalent to ''EEEE, MMMM d, y, h:mm:ss a zzzz'' (Monday, June 15, 2015 at 9:03:01 AM GMT+01:00).
''shortDate'': equivalent to ''M/d/yy'' (6/15/15).
''mediumDate'': equivalent to ''MMM d, y'' (Jun 15, 2015).
''longDate'': equivalent to ''MMMM d, y'' (June 15, 2015).
''fullDate'': equivalent to ''EEEE, MMMM d, y'' (Monday, June 15, 2015).
''shortTime'': equivalent to ''h:mm a'' (9:03 AM).
''mediumTime'': equivalent to ''h:mm:ss a'' (9:03:01 AM).
''longTime'': equivalent to ''h:mm:ss a z'' (9:03:01 AM GMT+1).
''fullTime'': equivalent to ''h:mm:ss a zzzz'' (9:03:01 AM GMT+01:00).

Answer 6

Lo único que funcionó para mí fue inspirado desde aquí: https://.com/a/35527407/2310544

Para dd / MM / aaaa puro, esto funcionó para mí, con angular 2 beta 16:

{{ myDate | date:''d''}}/{{ myDate | date:''MM''}}/{{ myDate | date:''y''}}

Answer 7

Puede encontrar más información sobre la tubería de fecha angular.io/api/common/DatePipe , como los formatos.

Si desea usarlo en su componente, simplemente puede hacer

pipe = new DatePipe(''en-US''); // Use your own locale

Ahora, simplemente puede usar su método de transformación, que será

const now = Date.now();
const myFormattedDate = this.pipe.transform(now, ''short'');

Answer 8

Puede lograr esto mediante una simple tubería personalizada.

import { Pipe, PipeTransform } from ''@angular/core'';
import { DatePipe } from ''@angular/common'';

@Pipe({
    name: ''dateFormatPipe'',
})
export class dateFormatPipe implements PipeTransform {
    transform(value: string) {
       var datePipe = new DatePipe("en-US");
        value = datePipe.transform(value, ''dd/MM/yyyy'');
        return value;
    }
}


{{currentDate | dateFormatPipe }}

La ventaja de usar una tubería personalizada es que, si desea actualizar el formato de fecha en el futuro, puede ir y actualizar su tubería personalizada y se reflejará en todas partes.

angulartutorial.net/2017/04/…

Answer 9

Si alguien mira con tiempo y zona horaria, esto es para ti

 {{data.ct | date :''dd-MMM-yy h:mm:ss a ''}}

agregue z para la zona horaria al final del formato de fecha y hora

 {{data.ct | date :''dd-MMM-yy h:mm:ss a z''}}

Answer 10

Si alguien puede buscar mostrar la fecha con la hora en AM o PM en angular 6, entonces esto es para usted.

convertDateToString(dateToBeConverted: string) {
return moment(dateToBeConverted, "YYYY-MM-DD HH:mm:ss").format("DD-MMM-YYYY");
}

Salida

Opciones de formato predefinidas

Se dan ejemplos en la configuración regional en-US.

{{date | date: ''dd/MM/yyyy hh:mm a''}}

angular.io/api/common/DatePipe

Answer 11

Siempre uso Moment.js cuando necesito usar fechas por cualquier motivo.

Prueba esto:

import { Pipe, PipeTransform } from ''@angular/core''
import * as moment from ''moment''

@Pipe({
   name: ''formatDate''
})
export class DatePipe implements PipeTransform {
   transform(date: any, args?: any): any {
     let d = new Date(date)
     return moment(d).format(''DD/MM/YYYY'')

   }
}

Y a la vista:

<p>{{ date | formatDate }}</p>

Answer 12

También puedes usar momentjs para este tipo de cosas. Momentjs es el mejor para analizar, validar, manipular y mostrar fechas en JavaScript.

Usé esta pipa de Urish, que funciona bien para mí:

https://github.com/urish/angular2-moment/blob/master/src/DateFormatPipe.ts

En el parámetro args puede poner su formato de fecha como: "dd / mm / aaaa"