Używam date
potoku 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();
}
}
date
Rura ma kilka problemów komunikatu.Odpowiedzi:
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:
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
źródło
<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ć?Zaimportuj DatePipe z kątownika / wspólnego, a następnie użyj poniższego kodu:
gdzie data_użytkownika będzie ciągiem daty. Sprawdź, czy to pomoże.
Zanotuj małe litery daty i roku:
EDYTOWAĆ
Musisz przekazać
locale
ciąg znaków jako argument do DatePipe, w najnowszym kącie. Testowałem pod kątem 4.xNa przykład:
źródło
Supplied parameters do not match any signature of call target.
nanew DatePipe()
new DatePipe('en-US');
Możesz to osiągnąć za pomocą zwykłego niestandardowego potoku.
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
źródło
Zawsze używam Moment.js, kiedy muszę używać dat z dowolnego powodu.
Spróbuj tego:
I w widoku:
źródło
moment
biblioteka jest za duża na małe zadanie takie jak format!Korzystam z tego rozwiązania tymczasowego:
źródło
Jeśli ktoś szuka czasu i strefy czasowej, jest to dla Ciebie
dodaj z dla strefy czasowej na końcu formatu daty i godziny
źródło
Kątowy: 8.2.11
Wyjście: 9 czerwca 1973 r
Wyjście: 09/06/1973
Wyjście: 09/06/1973 12:00
źródło
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:
źródło
Jeśli ktoś może chcieć wyświetlać datę z czasem w AM lub PM w kącie 6, to jest to dla Ciebie.
Wynik
Wstępnie zdefiniowane opcje formatu
Przykłady podano w ustawieniach regionalnych en-US.
Link referencyjny
źródło
Myślę, że dzieje się tak, ponieważ ustawienia regionalne są zakodowane na stałe w
DatePipe
. Zobacz ten link:W tej chwili nie ma możliwości zaktualizowania tego ustawienia narodowego przez konfigurację.
źródło
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 ...
Dodaj pakiet npj momentjs do swojego projektu.
Pod xyz.component.html (zwróć uwagę, że startDateTime ma ciąg typu danych)
{{ convertDateToString(objectName.startDateTime) }}
import * as moment from 'moment';
źródło
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ć
Teraz możesz po prostu użyć metody transformacji, która będzie
źródło
Musisz przekazać ciąg ustawień regionalnych jako argument do DatePipe.
Wstępnie zdefiniowane opcje formatu:
dodaj datepipe w app.component.module.ts
źródło
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”
źródło
W moim przypadku używam w pliku komponentu:
I w składowym pliku HTML
Działa dla mnie dobrze ;-)
źródło