[date] 파이프를 사용하여 날짜를 dd / MM / yyyy로 형식화

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보기



답변

각도 2.0.0-rc.2에 고정 된 파이프 날짜 형식 버그, 이 풀 요청 .

이제 우리는 일반적인 방법으로 할 수 있습니다 :

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

예 :

현재 버전 :

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

여기서
userdate
는 날짜 문자열입니다. 이것이 도움이되는지보십시오.

날짜 및 연도 소문자를 기록하십시오.

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

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

커스텀 파이프 예제


답변

어떤 이유로 든 날짜를 사용해야 할 때는 항상 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')

   }
}

그리고보기에서 :

<p>{{ date | formatDate }}</p>


답변

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

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


답변

시간과 시간대를 찾는 사람이라면 이것이 당신을위한 것입니다

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

날짜 및 시간 형식의 끝에서 시간대에 z를 추가하십시오.

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


답변

각도 : 8.2.11

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

출력 : 1973 년 6 월 9 일

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

산출 : 09/06/1973

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

출력 : 09/06/1973 12:00 AM