Sformatuj datę jako dd / MM / rrrr przy użyciu potoków

257

Używam datepotoku do sformatowania daty, ale po prostu nie mogę uzyskać dokładnego formatu bez obejścia. Czy źle rozumiem rury, czy jest to po prostu niemożliwe?

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

widok plnkr

Jp_
źródło
2
dateRura ma kilka problemów komunikatu.
Günter Zöchbauer
Ten kandydat do wydania nadal czuje się trochę niedokończony. To drugi problem, na który natknąłem się w ciągu 2 dni. Mam nadzieję, że wkrótce go naprawią. Tworzenie własnych potoków w tym celu jest opcją, ale wygląda to trochę jak powielanie ... i możesz to usunąć za kilka miesięcy ..
Maarten Kieft
formaty: angular.io/api/common/DatePipe
Robert King

Odpowiedzi:

466

Naprawiono błąd formatu daty potoku w Angular 2.0.0-rc.2, to żądanie ściągnięcia .

Teraz możemy zrobić w tradycyjny sposób:

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

Przykłady:

Obecna wersja:

Example Angular 8.x.x


Stare wersje:

Example Angular 7.x

Example Angular 6.x

Example Angular 4.x

Example Angular 2.x


Więcej informacji w dokumentacji DatePipe

Fernando Leal
źródło
1
dzięki, chciałbym tylko dołączyć dodatkowe wskazówki dotyczące problemu z formatem IE11 ++, por. stackoverflow.com/questions/39728481/…
boly38
W Angular 5 zostało to najwyraźniej rozwiązane @ boly38, w odpowiedzi na aktualizację. I moja odpowiedź w pytaniu powiązana: stackoverflow.com/a/46218711/2290538
Fernando Leal
Dostaję datę od API jako dob: „2019-02-05 00:00:00”. Chcę usunąć 00:00:00 i mam formularz oparty na szablonie kątowym 6. Moje pole wprowadzania znajduje się tutaj. <input #dob="ngModel" [(ngModel)]="model.dob" [ngClass]="{ 'is-invalid': f.submitted && dob.invalid }" class="form-control" id="dob" name="dob" required type="date" /> jak mogę to naprawić?
Denuka
@FernandoLeal - To jest niesamowite. Dzięki za to.
Josh
to nie będzie tłumaczone.
Aamer Shahzad
86

Zaimportuj DatePipe z kątownika / wspólnego, a następnie użyj poniższego kodu:

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

gdzie data_użytkownika będzie ciągiem daty. Sprawdź, czy to pomoże.

Zanotuj małe litery daty i roku:

d- date
M- month
y-year

EDYTOWAĆ

Musisz przekazać localeciąg znaków jako argument do DatePipe, w najnowszym kącie. Testowałem pod kątem 4.x

Na przykład:

var datePipe = new DatePipe('en-US');
Prashanth
źródło
Z jakiegoś powodu wydaje się to bardzo ciężkie. Robimy to samo (po wykryciu zmiany) i zajmuje 75% czasu wykonania naszej aplikacji
sześćdziesiąt stóp
7
Z kątowym 2.1.1, błąd ten jest generowany Supplied parameters do not match any signature of call target.nanew DatePipe()
saiy2k
6
Możesz użyć czegoś takiegonew DatePipe('en-US');
Chad Kuehn
Cześć, chcę ten sam format w angular2 jak 26 stycznia (nie chcę tego roku) jak?
yala ramesh
HIPrashanth, pojawia się błąd „Nieobsługiwane odrzucenie obietnicy: Brak dostawcy dla DatePipe! „.
MMR
19

Możesz to osiągnąć za pomocą zwykłego niestandardowego potoku.

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

Zaletą korzystania z potoku niestandardowego jest to, że jeśli chcesz zaktualizować format daty w przyszłości, możesz przejść i zaktualizować niestandardowy potok, który będzie odzwierciedlał każde miejsce.

Niestandardowe przykłady rur

Prashobh
źródło
14

Zawsze używam Moment.js, kiedy muszę używać dat z dowolnego powodu.

Spróbuj tego:

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

   }
}

I w widoku:

<p>{{ date | formatDate }}</p>
Oriana Ruiz
źródło
8
momentbiblioteka jest za duża na małe zadanie takie jak format!
Al-Mothafar,
@Oriana, fajna odpowiedź. Używam tego w ten sposób; item.deferredStartDate = item.deferredStartDate? moment (item.deferredStartDate) .toDate (): null; To jest tak samo jak twoja implementacja.
Kushan Randima
12

Korzystam z tego rozwiązania tymczasowego:

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
źródło
Jestem nowy w Angular 2 i mam problem z uruchomieniem tego. Dodałem go we własnym pliku TS (skompilowanym do js). Próbowałem kilku rzeczy, w tym dodając go jako dostawcę komponentu aplikacji, a następnie w konstruktorze mojego komponentu podrzędnego, ale nie udało mi się go uruchomić. Błąd jest; „Nie można znaleźć potoku„ dateFormat ”. Czy możesz dać mi szybki przegląd tego, jak to zaimplementować, proszę. Oto pakiety, których używam „zależności”: {„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
Czy możesz proszę oszukać kod, zrobię korektę. Użyj najnowszej wersji angular2
Deepak
@Deepakrao Co to jest „pt” tutaj? Jak mam nazwać tę rurę w moim komponencie? jak let date = new DateFormat (). transform (input); Proszę mnie poprawić. A co jeśli chcę wyświetlić hh: mm, tj. Czas
Protagonista
11

Jeśli ktoś szuka czasu i strefy czasowej, jest to dla Ciebie

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

dodaj z dla strefy czasowej na końcu formatu daty i godziny

 {{data.ct | date :'dd-MMM-yy h:mm:ss a z'}}
ULLAS K
źródło
7

Kątowy: 8.2.11

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

Wyjście: 9 czerwca 1973 r

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

Wyjście: 09/06/1973

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

Wyjście: 09/06/1973 12:00

RM Shahidul Islam Shahed
źródło
Drugi i trzeci przykład są takie same i generują różne wyniki?
Jp_
5

Jedyną rzeczą, która działała dla mnie, była inspiracja stąd: https://stackoverflow.com/a/35527407/2310544

Dla czystego dd / MM / rrrr, to zadziałało dla mnie z kątową 2 beta 16:

{{ myDate | date:'d'}}/{{ myDate | date:'MM'}}/{{ myDate | date:'y'}}
Bukiet Johan
źródło
to całkiem czytelny hack dla wersji beta, nie wiem, dlaczego został odrzucony, ale przywrócę go do zera;)
Sam Vloeberghs
5

Jeśli ktoś może chcieć wyświetlać datę z czasem w AM lub PM w kącie 6, to jest to dla Ciebie.

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

Wynik

wprowadź opis zdjęcia tutaj

Wstępnie zdefiniowane opcje formatu

Przykłady podano w ustawieniach regionalnych 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 referencyjny

Ahmer Ali Ahsan
źródło
4

Pipety daty nie działają poprawnie w Angular 2 z Typescript dla przeglądarki Safari na MacOS i iOS. Ostatnio spotkałem się z tym problemem. Musiałem wykorzystać moment js tutaj do rozwiązania problemu. Krótko mówiąc o tym, co zrobiłem ...

  1. Dodaj pakiet npj momentjs do swojego projektu.

  2. Pod xyz.component.html (zwróć uwagę, że startDateTime ma ciąg typu danych)

{{ convertDateToString(objectName.startDateTime) }}

  1. W obszarze 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
źródło
1
Pomogłoby to, gdybyś pokazał kod, którego używałeś z momentjs, aby każdy, kto chciał wypróbować to rozwiązanie, nie musiałby go jeszcze rozgryźć.
Fantastyczny
Zaktualizowałem mój komentarz o rozwiązanie. Proszę sprawdzić.
Nikhil
3

Więcej informacji na temat datownika można znaleźć tutaj , na przykład formaty.

Jeśli chcesz go użyć w swoim komponencie, możesz po prostu to zrobić

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

Teraz możesz po prostu użyć metody transformacji, która będzie

const now = Date.now();
const myFormattedDate = this.pipe.transform(now, 'short');
Yushin
źródło
3

Musisz przekazać ciąg ustawień regionalnych jako argument do DatePipe.

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

Wstępnie zdefiniowane opcje formatu:

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

dodaj datepipe w 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
źródło
2

Możesz także użyć momentjs do tego rodzaju rzeczy. Momentjs jest najlepszy w analizowaniu, sprawdzaniu poprawności, manipulowaniu i wyświetlaniu dat w JavaScript.

Użyłem tej fajki z Urish, która działa dobrze dla mnie:

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

W parametrze args możesz ustawić format daty, np .: „dd / mm / rrrr”

Doek
źródło
link uszkodzony, link jest teraz github.com/urish/angular2-moment/blob/master/src/…
Tony
0

W moim przypadku używam w pliku komponentu:

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

I w składowym pliku HTML

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

Działa dla mnie dobrze ;-)

Sébastien REMY
źródło