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

257

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

Jp_
источник
2
dateТруба имеет несколько проблем , в настоящее время.
Гюнтер Цохбауэр
Этот релиз-кандидат все еще чувствует себя немного незаконченным. Это вторая проблема, за которую я споткнулся за 2 дня .. надеюсь, они исправят ее в ближайшее время. Создание собственных каналов для этого варианта, но это похоже на дублирование ... и вы можете удалить его через несколько месяцев ..
Мартен Кифт
форматы: angular.io/api/common/DatePipe
Роберт

Ответы:

467

Исправлена ​​ошибка форматирования даты в Angular 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

Фернандо Лил
источник
1
спасибо, просто хотел бы добавить дополнительные советы по проблеме формата IE11 ++, ср. stackoverflow.com/questions/39728481/…
boly38
В Angular 5 это, по-видимому, было решено @ boly38, следите за обновлением в ответе. И мой ответ на вопрос связан: stackoverflow.com/a/46218711/2290538
Фернандо Лил
Я получаю дату от API как dob: "2019-02-05 00:00:00". Я хочу удалить 00:00:00, и у меня есть управляемая шаблоном форма в угловом 6. Мое поле ввода здесь дано. <input #dob="ngModel" [(ngModel)]="model.dob" [ngClass]="{ 'is-invalid': f.submitted && dob.invalid }" class="form-control" id="dob" name="dob" required type="date" /> Как я могу это исправить ?
Денука
@FernandoLeal - это потрясающе. Спасибо за это.
Джош
это не будет переводимым.
Аамер Шахзад
86

Импортируйте 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');
Prashanth
источник
Это, по некоторым причинам, кажется очень тяжелым. Мы делаем то же самое (при обнаружении изменений), и это занимает 75% времени выполнения нашего приложения
sixtyfootersdude
7
С угловому 2.1.1, эта ошибка возникает Supplied parameters do not match any signature of call target.наnew DatePipe()
saiy2k
6
Вы можете использовать что-то вродеnew DatePipe('en-US');
Чад Kuehn
Привет, я хочу этот же формат в angular2, как 26 января (не хочу года), как?
Яла Рамеш
HIPrashanth, я получаю сообщение об ошибке «Unhandled Promise rejection: нет поставщика для DatePipe! ».
MMR
19

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

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

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

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

Prashobh
источник
14

Я всегда использую 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>
Ориана Руис
источник
8
momentбиблиотека слишком велика для такой маленькой работы, как формат!
Аль-Мотафар
@ Ориана, Хороший ответ. Я использую это так; item.deferredStartDate = item.deferredStartDate? момент (item.deferredStartDate) .toDate (): null; Это так же, как ваша реализация.
Кушан Рандима
12

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

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');
        }
    }
}
Дипак
источник
Я новичок в Angular 2 и у меня проблемы с этим. Я добавил его в свой собственный файл TS (скомпилированный в JS). Я попробовал несколько вещей, включая добавление его в качестве провайдера в компонент приложения, а затем в конструктор моего дочернего компонента, но я не смог его запустить. Ошибка есть; Msgstr "Канал 'dateFormat' не найден". Можете ли вы дать мне краткий обзор того, как реализовать это, пожалуйста. Вот пакеты, которые я использую "зависимости": {"angular2": "2.0.0-beta.17", "systemjs": "0.19.25", "es6-shim": "^ 0.35.0", " lect-metadata ":" 0.1.2 "," rxjs ":" 5.0.0-beta.2 "," zone.js ":" 0.6.10 "},
Крейг Б
Можете ли вы, пожалуйста, введите ваш код, я сделаю исправление. Пожалуйста, используйте последнюю версию angular2
Deepak
@Deepakrao Что такое «pt» здесь? И как я называю эту трубу в моем компоненте? например let date = new DateFormat (). transform (input); Пожалуйста, поправьте меня. А что если я хочу отобразить чч: мм, т.е. время
Главный герой
11

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

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

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

 {{data.ct | date :'dd-MMM-yy h:mm:ss a z'}}
ULLAS K
источник
7

Угловая: 8.2.11

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

Выход: 9 июня 1973 г.

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

Выход: 06.09.1973

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

Выходной: 06.09.1973, 00:00.

Р.М. Шахидул Ислам Шахед
источник
Второй и третий пример одинаковы и генерируют разные результаты?
Jp_
5

Единственное, что сработало для меня, было вдохновлено отсюда: https://stackoverflow.com/a/35527407/2310544

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

{{ myDate | date:'d'}}/{{ myDate | date:'MM'}}/{{ myDate | date:'y'}}
Йохан Шуке
источник
это довольно читабельный хак для бета-версий, не знаю, почему за него проголосовали, но я верну его к нулю;)
Сэм Влёбергс,
5

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

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

Вывод

введите описание изображения здесь

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

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

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

Ахмер Али Ахсан
источник
4

Каналы даты не работают правильно в 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");
}
Нихилу
источник
1
Было бы полезно, если бы вы продемонстрировали код, который вы использовали с моментами, так что любому, кто хотел бы попробовать это решение, не пришлось бы его выяснять.
Великолепно
Обновил мой комментарий с решением. Пожалуйста, проверьте.
Нихил
3

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

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

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

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

const now = Date.now();
const myFormattedDate = this.pipe.transform(now, 'short');
Юшин
источник
3

Вы должны передать строку локали в качестве аргумента 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).

добавить datepipe в 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
источник
2

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

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

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

В параметре args вы можете указать формат даты: «дд / мм / гггг»

Дук
источник
ссылка битая, ссылка теперь github.com/urish/angular2-moment/blob/master/src/…
Тони
0

В моем случае я использую в файле компонента:

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>

Он отлично работает для меня ;-)

Себастьян РЕМИ
источник