Estoy usando la datetubería para formatear mi fecha, pero simplemente no puedo obtener el formato exacto que quiero sin una solución. ¿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

Error de formato de fecha de tubería solucionado 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:

Example Angular 8.x.x

Versiones antiguas:

Example Angular 7.x

Example Angular 6.x

Example Angular 4.x

Example Angular 2.x

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

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

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

Por ejemplo:

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

Puede lograr esto usando 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.

Ejemplos de tuberías personalizadas

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>

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

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'}}

Angular: 8.2.11

<td>{{ data.DateofBirth | date }}</td>

Salida: 9 de junio de 1973

<td>{{ data.DateofBirth | date: 'dd/MM/yyyy' }}</td>

Salida: 06/09/1973

<td>{{ data.DateofBirth | date: 'dd/MM/yyyy hh:mm a' }}</td>

Salida: 06/09/1973 12:00 AM

Lo único que funcionó para mí fue inspirado desde aquí: https://stackoverflow.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'}}

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

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

Salida

Opciones de formato predefinidas

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

'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).

Link de referencia

Creo que es porque la configuración regional está codificada en el 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.

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';

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

Puede encontrar más información sobre el tubo de fecha aquí , 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');

Debe pasar la cadena de configuración regional como argumento a DatePipe.

var ddMMyyyy = this.datePipe.transform(new Date(),"dd-MM-yyyy");

Opciones de formato predefinidas:

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

agregue datepipe en app.component.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {DatePipe} from '@angular/common';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    DatePipe
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

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"

En mi caso, uso en el archivo componente:

import {formatDate} from '@angular/common';

// Use your preferred locale
import localeFr from '@angular/common/locales/fr';
import { registerLocaleData } from '@angular/common';

// ....

displayDate: string;
registerLocaleData(localeFr, 'fr');
this.displayDate = formatDate(new Date(), 'EEEE d MMMM yyyy', 'fr');

Y en el archivo HTML componente

<h1> {{ displayDate }} </h1>

Funciona bien para mí ;-)