Formate a data como dd / MM / aaaa usando pipes

257

Estou usando o datepipe para formatar minha data, mas não consigo obter o formato exato desejado sem uma solução alternativa. Estou entendendo mal os tubos ou simplesmente não é possível?

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

visualização plnkr

Jp_
fonte
2
O datecanal tem vários problemas atualmente.
Günter Zöchbauer 02/03
Esse candidato a lançamento ainda parece um pouco inacabado. Esta é a segunda edição que eu tropecei em 2 dias .. espero que eles consertem isso em breve. Criando seus próprios tubos para isso é opção, mas ele se sente um pouco como a duplicação .. e você pode removê-lo em poucos meses ..
Maarten Kieft
formatos: angular.io/api/common/DatePipe
Robert King

Respostas:

466

Erro de formato de data do pipe corrigido no Angular 2.0.0-rc.2, esta solicitação de recebimento .

Agora podemos fazer da maneira convencional:

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

Exemplos:

Versão Atual:

Example Angular 8.x.x


Versões antigas:

Example Angular 7.x

Example Angular 6.x

Example Angular 4.x

Example Angular 2.x


Mais informações na documentação DatePipe

Fernando Leal
fonte
1
obrigado, gostaria de acrescentar dicas adicionais para a edição no formato IE11 ++, cf. stackoverflow.com/questions/39728481/...
boly38
No Angular 5, isso aparentemente foi resolvido no boly38, siga a atualização em resposta. E a minha resposta em questão vinculada: stackoverflow.com/a/46218711/2290538 #
Fernando Leal
Estou recebendo a data da API como dn: "2019-02-05 00:00:00". Desejo remover 00:00:00 e tenho um formulário orientado a modelos na angular 6. Meu campo de entrada é fornecido aqui. <input #dob="ngModel" [(ngModel)]="model.dob" [ngClass]="{ 'is-invalid': f.submitted && dob.invalid }" class="form-control" id="dob" name="dob" required type="date" /> Como posso consertar isso ?
Denuka 5/02/19
@FernandoLeal - Isso é incrível. Obrigado por isso.
1919 Josh
isso não será traduzível.
Aamer Shahzad 12/02
86

Importe o DatePipe de angular / comum e use o código abaixo:

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

onde userdate será sua string de data. Veja se isso ajuda.

Anote as letras minúsculas para data e ano:

d- date
M- month
y-year

EDITAR

Você deve passar a localestring como argumento para o DatePipe, na última angular. Eu testei no angular 4.x

Por exemplo:

var datePipe = new DatePipe('en-US');
Prashanth
fonte
Por algum motivo, isso parece ser muito pesado. Estamos fazendo a mesma coisa (na detecção de alterações) e está demorando 75% do tempo de execução do aplicativo
sixtyfootersdude
7
Com Angular 2.1.1, este erro é lançado Supplied parameters do not match any signature of call target.emnew DatePipe()
saiy2k
6
Você pode usar algo parecido com:new DatePipe('en-US');
Chad Kuehn
Oi, eu quero esse mesmo formato em angular2 como 26 de janeiro (não quero ano) como?
Yala ramesh
HIPrashanth, estou recebendo o erro 'Rejeição de promessa não tratada: Nenhum provedor para DatePipe! '
MMR
19

Você pode conseguir isso usando um simples tubo personalizado.

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

A vantagem de usar um canal personalizado é que, se você quiser atualizar o formato da data no futuro, poderá atualizar seu canal personalizado e ele refletirá em todos os lugares.

Exemplos de tubos personalizados

Prashobh
fonte
14

Eu sempre uso o Moment.js quando preciso usar datas por qualquer motivo.

Tente o seguinte:

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

   }
}

E na visão:

<p>{{ date | formatDate }}</p>
Oriana Ruiz
fonte
8
momentbiblioteca é muito grande para um trabalho pequeno como o formato!
Al-Mothafar
@ Oriana, boa resposta. Eu uso desta maneira; item.deferredStartDate = item.deferredStartDate? momento (item.deferredStartDate) .toDate (): null; É exatamente o mesmo que sua implementação.
Kushan Randima 23/04
12

Estou usando esta solução temporária:

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');
        }
    }
}
Deepak
fonte
Eu sou novo no angular 2 e estou tendo problemas para resolver isso. Eu o adicionei em seu próprio arquivo TS (compilado em js). Tentei várias coisas, incluindo adicioná-lo como um provedor no componente de aplicativo e depois no construtor do componente filho, mas não consegui fazê-lo. Erro é; "Não foi possível encontrar o canal 'dateFormat'". Você pode me dar uma rápida visão geral de como implementar isso, por favor. Aqui estão os pacotes que estou usando "dependências": {"angular2": "2.0.0-beta.17", "systemjs": "0.19.25", "es6-shim": "^ 0.35.0", " reflect-metadata ":" 0.1.2 "," rxjs ":" 5.0.0-beta.2 "," zone.js ":" 0.6.10 "},
Craig B
Você pode por favor plunker você codificar eu vou fazer correção. Utilize última versão do angular2
Deepak
@Deepakrao O que é 'pt' aqui? E como chamo esse pipe no meu componente? como let date = new DateFormat (). transform (input); Por favor me corrija. E se eu quiser exibir hh: mm, ou seja, tempo
Protagonista
11

Se alguém olhando com hora e fuso horário, isso é para você

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

adicione z para o fuso horário no final do formato de data e hora

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

Angular: 8.2.11

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

Saída: 9 de junho de 1973

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

Saída: 09/06/1973

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

Saída: 09/06/1973 12:00 AM

RM Shahidul Islam Shahed
fonte
O segundo e o terceiro exemplo são os mesmos e geram resultados diferentes?
Jp_ 27/10/19
5

A única coisa que funcionou para mim foi inspirada a partir daqui: https://stackoverflow.com/a/35527407/2310544

Para dd / MM / aaaa puro, isso funcionou para mim, com o angular 2 beta 16:

{{ myDate | date:'d'}}/{{ myDate | date:'MM'}}/{{ myDate | date:'y'}}
Johan Chouquet
fonte
isto é bastante um hack legível para versões beta, não sei por que ele foi downvoted mas vou trazê-lo de volta para zero;)
Sam Vloeberghs
5

Se alguém puder exibir a data com hora em AM ou PM na angular 6, isso é para você.

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

Resultado

insira a descrição da imagem aqui

Opções de formato predefinidas

Exemplos são dados em localidade 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 referência

Ahmer Ali Ahsan
fonte
4

Os pipes de data não se comportam corretamente no Angular 2 com o navegador Typescript para Safari no MacOS e iOS. Eu enfrentei esse problema recentemente. Eu tive que usar o momento js aqui para resolver o problema. Mencionando o que fiz em resumo ...

  1. Adicione o pacote momentjs npm no seu projeto.

  2. Em xyz.component.html, (observe aqui que startDateTime é do tipo string de dados)

{{ convertDateToString(objectName.startDateTime) }}

  1. Em xyz.component.ts,

import * as moment from 'moment';

convertDateToString(dateToBeConverted: string) {
return moment(dateToBeConverted, "YYYY-MM-DD HH:mm:ss").format("DD-MMM-YYYY");
}
Nikhil
fonte
1
Seria bom se você mostrasse o código usado com o momentjs para que qualquer pessoa que quisesse experimentar essa solução ainda não tivesse que descobrir.
Fabuloso
Atualizado meu comentário com a solução. Por favor, verifique.
Nikhil
3

Você pode encontrar mais informações sobre o canal de datas aqui , como formatos.

Se você quiser usá-lo em seu componente, você pode simplesmente fazer

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

Agora, você pode simplesmente usar seu método de transformação, que será

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

Você precisa passar a sequência de código do idioma como argumento para DatePipe.

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

Opções 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).

adicione o datepipe em 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 { }
Tienanhvn
fonte
2

Você também pode usar momentjs para esse tipo de coisa. O Momentjs é melhor para analisar, validar, manipular e exibir datas em JavaScript.

Eu usei este cachimbo da Urish, que funciona bem para mim:

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

No parâmetro args, você pode colocar seu formato de data como: "dd / mm / aaaa"

Doek
fonte
link quebrado, o link está agora github.com/urish/angular2-moment/blob/master/src/… #
Tony Tony
0

No meu caso, eu uso no arquivo de 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');

E no arquivo HTML do componente

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

Isso funciona bem para mim ;-)

Sébastien REMY
fonte