Рубрики
Без рубрики

Как: преобразование формата даты с / дата (xxxxxxxxxx) / на пользовательский формат в угловой 2+

Пользовательские трубы для преобразования даты в угловой 2

Автор оригинала: Niladri Sekhar Dutta.

Проблема

Иногда во время нашего развития мы сталкиваемся с проблемами при форматировании Дата В угловом углу, который мы получаем от сервера в результате вызова API для отдыха.

В случае ASP .NET MVC мы можем создать контроллер с помощью метода действий, который возвращает JSONRESULT ( официальная документация ), а затем вызовите этот метод действий из углового использования в качестве API. Однако, если есть какое-либо свойство с типом System.DateTime В ответ JSON от API отдыха мы получим дату в этом формате ниже –

/Дата (xxxxxxxxxxxxxx)/

Обычно этот тип формата возвращается .NET MVC JSON Serializer, пока сериализация Datetime Значение в JSON. Эта проблема не существует в веб-API 2, так как Web API использует Json.net Для сериализации данных DateTime, когда мы возвращаем Http отклик. Нет никакой из ящика, чтобы преобразовать эту дату на наличие собственного пользовательского Дата Формат в угловом углу, используя встроенный DatePipe угловой.

Поэтому нам нужно создать пользовательскую трубу в угловом углу для форматирования даты от /Дата (xxxxxxxxxxxxxx)/ Формат до объекта DATE JSON с TimeZone. Тогда мы можем использовать встроенные DatePipe угловой в верхней части этого, чтобы получить требуемый формат без разделения даты. Вот код для пользовательской трубы –

Решение

Пользовательский код даты

Custom-Date.Pipes.ts.

import { Pipe, PipeTransform } from '@angular/core';
/*
 * Formats a /Date(xxxxxxxxxxxxx)/ into a JSON Date object
 * Takes an argument as input of actual date value in /Date(xxxxxxxxxxxxx)/ format.
 * Usage:
 *   date-value | customDateFormat
 * Example:
 *   {{ '/Date(1402034400000)/' | customDateFormat}}
*/
@Pipe({name: 'customDateFormat'}  )
export class CustomDateFormat implements PipeTransform {
  transform(value: any): Date {
       var customDate = new Date(value.match(/\d+/)[0] * 1);  
       return  customDate;
  }
}

Нам нужно импортировать эту пользовательскую трубу в нашем корневом модуле ( app.module.ts ).

Образец компонентного кода

app.component.ts.

import { Component } from '@angular/core';
import {DatePipe} from '@angular/common'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 5';
  originalDate:string = '/Date(1524210579389)/';
}

Использование в HTML шаблон

app.component.html.

Original date: {{originalDate}}
 


Custom date: {{originalDate | customDateFormat|date :'short'}}

Здесь мы использовали встроенные Дата: «коротко» Труба, чтобы снова отформатировать результат.

Вот окончательный выход –

Пользовательская дата: 4/20/18, 13:19 вечера

Образец рабочей демонстрации доступен ниже –

Пользовательские трубы демонстрируют

Этот пример применим для угловых 2,4 и любых более высоких версий угловых. Однако мы можем создать эквивалентный пользовательский фильтр в Angular.js тоже.

Счастливое кодирование !!

Читайте ещё по теме: