Формат даты как дд/мм/гггг с использованием труб

Я использую канал 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

Импортируйте DatePipe из angular/common, а затем используйте следующий код:

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

Ответ 3

Вы можете добиться этого, используя простой пользовательский канал.

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

Преимущество использования настраиваемого канала заключается в том, что если вы хотите в будущем обновить формат даты, вы можете перейти и обновить свой собственный канал, и он будет отражать все где угодно.

Примеры пользовательских труб

Ответ 4

Я всегда использую 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>

Ответ 5

Я использую это временное решение:

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

Ответ 6

Если кто-то смотрит со временем и часовым поясом, это для вас

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

добавьте z для часового пояса в конце формата даты и времени

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

Ответ 7

Единственное, что сработало для меня, было вдохновлено отсюда: fooobar.com/questions/55241/...

Для чистого dd/MM/yyyy это сработало для меня, angular 2 beta 16:

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

Ответ 9

Каналы даты не работают правильно в Angular 2 с браузером Typescript для Safari на MacOS и iOS. Я недавно столкнулся с этой проблемой. Я должен был использовать момент js здесь для решения проблемы. Упоминая, что я сделал вкратце...

  1. Добавьте пакет momentjs npm в свой проект.

  2. В xyz.component.html (обратите внимание, что startDateTime имеет строку типа данных)

{{ convertDateToString(objectName.startDateTime) }}

  1. Под xyz.component.ts,

import * as moment from 'moment';

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

Ответ 10

Если кто-то может смотреть дату и время в AM или PM в угловых 6, то это для вас.

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

Выход

enter image description here

Предопределенные параметры формата

Примеры приведены в локали 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).

Ссылка Ссылка

Ответ 11

Вы также можете использовать momentjs для такого рода вещей. Momentjs лучше всего разбирать, проверять, манипулировать и отображать даты в JavaScript.

Я использовал эту трубку у Urish, которая отлично работает для меня:

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

В параметре args вы можете поместить свой формат даты, например: "dd/mm/yyyy"

Ответ 12

Вы можете найти больше информации о трубе даты здесь, такой как форматы.

Если вы хотите использовать его в своем компоненте, вы можете просто сделать

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

Теперь вы можете просто использовать его метод преобразования, который будет

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