파이프를 사용하여 날짜를 dd/MM/yyyy로 형식 지정

파이프를 사용하여 날짜를 dd/MM/yyyy로 형식 지정

사용중다니입▁the를 사용하고 있습니다.date파이프를 사용하여 날짜를 포맷하지만 해결 방법 없이는 원하는 형식을 얻을 수 없습니다.제가 파이프를 잘못 이해하고 있는 것입니까, 아니면 불가능한 것입니까?

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

plnkr 뷰

Angular 2.0.0-rc.2에서 파이프 날짜 형식 버그가 수정되었습니다. 이 풀 요청입니다.

이제 기존 방식을 사용할 수 있습니다.

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

---

예:

현재 버전:

Example Angular 13

---

이전 버전:

Example Angular 8.x.x

Example Angular 7.x

Example Angular 6.x

Example Angular 4.x

Example Angular 2.x

---

은 다음을 하십시오.DatePipe

각도/공통에서 DatePipe를 가져온 다음 다음 코드를 사용합니다.

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

여기서 사용자 날짜는 날짜 문자열이 됩니다.이게 도움이 되는지 보세요.

날짜 및 연도의 소문자를 메모합니다.

d - date
M - month
y - year

편집

은 격해야합다니를 통과해야 합니다.locale최신 각도의 DatePipe 인수 문자열입니다.각도 4.x에서 테스트했습니다.

예:

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

간단한 사용자 지정 파이프를 사용하여 이를 달성할 수 있습니다.

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

사용자 지정 파이프를 사용하면 나중에 날짜 형식을 업데이트하려는 경우 사용자 지정 파이프를 업데이트하여 모든 곳에 반영할 수 있다는 이점이 있습니다.

사용자 정의 파이프 예제

각도: 8.2.11

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

출력: 1973년 6월 9일

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

출력: 1973년 09월 06일

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

출력: 1973년 09월 06일 오전 12:00분

업데이트:

Moment.js가 더 이상 사용되지 않으므로 이 답변은 더 이상 유효하지 않습니다.포맷해야 할때 또는 현재날포야맷해할는때또따를 합니다.date-fns는 Moment 계산에 입니다. Moment.js (Moment.js (날짜를 날짜에 추가하거나 제거함).

사용 안 함:

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

그리고 보기에서:

date | formatDate }}

만약 시간과 시간대를 가진 사람이 있다면, 이것은 당신을 위한 것입니다.

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

날짜 및 시간 형식의 끝에 표준 시간대에 대한 z 추가

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

이 임시 솔루션을 사용하고 있습니다.

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

로케일 문자열을 DatePipe 인수로 전달해야 합니다.

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

미리 정의된 형식 옵션:

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

app.component.sys.ts에 datepipe 추가

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

오전 또는 오후 시간을 각도 6에 표시할 수 있는 날짜를 찾고 있는 사람이 있다면 이는 사용자를 위한 것입니다.

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

산출량

미리 정의된 형식 옵션

예는 미국 내 로케일로 제공됩니다.

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

참조 링크

형식과 같은 날짜 파이프에 대한 자세한 정보는 여기에서 확인할 수 있습니다.

구성 요소에서 사용하려면 다음을 수행하면 됩니다.

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

이제 간단하게 변환 방법을 사용할 수 있습니다.

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

여기서 영감을 얻은 것은 https://stackoverflow.com/a/35527407/2310544 뿐입니다.

순수한 dd/MM/yyyy의 경우 각도 2 베타 16:

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

MacOS 및 iOS의 Safari 브라우저용 Typescript가 있는 Angular 2에서 날짜 파이프가 올바르게 작동하지 않습니다.저는 최근에 이 문제에 직면했습니다.저는 여기서 문제 해결을 위해 모멘트 js를 사용해야 했습니다.내가 한 일을 간단히 말하면...

1. 프로젝트에 momentjsnpm 패키지를 추가합니다.

2. xyz.component.html에서 (startDateTime은 데이터 유형 문자열임을 참고)

{{ convertDateToString(objectName.startDateTime) }}

3. xyz.component.ts에서

import * as moment from 'moment';

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

로케일이 하드 코딩되어 있기 때문이라고 생각합니다.DatePipe다음 링크 참조:

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

현재 구성으로 이 로케일을 업데이트할 수 있는 방법이 없습니다.

저의 경우 구성 요소 파일에서 사용합니다.

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

구성 요소 HTML 파일에서

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

저는 잘 작동합니다 ;-)

일부 사람들에게는 분명할 수 있지만, 이 날짜 형식을 지정합니다.

01.07.1987 (예: 일반적)독일)

다음과 같이 간단히 수행할 수 있습니다.

{{ myDate | date: "dd.MM.yyyy" }}

당신은 이런 종류의 것들에 momentjs를 사용할 수도 있습니다.Momentjs는 JavaScript에서 날짜를 구문 분석, 검증, 조작 및 표시하는 데 가장 적합합니다.

나는 유리시의 파이프를 사용했는데, 나에게 잘 맞습니다.

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

args 매개 변수에 "dd/mm/yyyy"와 같은 날짜 형식을 입력할 수 있습니다.

제 경우에는 날짜 문자열 형식을 사용했습니다.dd/MM/yyyy다른 형식으로 변환하려고 했습니다.

그리고 이 오류는 저에게 충격을 주었습니다.InvalidPipeArgument.

몇 번 검색한 결과, 날짜 문자열이 ISO로 인식되는 형식이어야 한다는 것을 알게 되었습니다.

언급URL : https://stackoverflow.com/questions/35754586/format-date-as-dd-mm-yyyy-using-pipes