Procedimiento: convertir el formato de fecha de /Date(xxxxxxxxxx)/ a un formato personalizado en Angular 2+

El problema

A veces, durante nuestro desarrollo, nos enfrentamos a problemas al formatear el Date en Angular que recibimos del lado del servidor como resultado de la llamada REST api.

En el caso de ASP .NET MVC, podemos crear un controlador con un método de acción que devuelva JsonResult (Documentación oficial) y luego llame a ese método de acción desde Angular como una API REST. Sin embargo, si hay alguna propiedad con tipo System.DateTime en la respuesta json de la API REST, luego recibimos la fecha en este formato a continuación:

/Fecha(xxxxxxxxxxxxxxx)/

Por lo general, este tipo de formato lo devuelve el serializador .NET MVC json durante la serialización DateTime valor en JSON. Este problema no existe en WEB API 2 como utiliza web api JSON.NET para serializar el DateTime cuando regresemos HTTP respuesta. No existe una solución lista para usar para convertir esta fecha a nuestra propia costumbre Date formato en Angular usando el incorporado DatePipe de Angular.

Por lo tanto, necesitamos crear una tubería personalizada en Angular para formatear la fecha desde /Fecha(xxxxxxxxxxxxxxx)/ formato a un objeto de fecha json con zona horaria. Entonces podemos usar el incorporado DatePipe de angular además de eso para obtener el formato requerido sin dividir la fecha. Aquí está el código para la tubería personalizada:

La solución

Código de tubería de fecha personalizado

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

Necesitamos importar esta tubería personalizada en nuestro módulo raíz (aplicación.módulo.ts) además .

Ejemplo de código de componente

aplicación.componente.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)/';
}

Uso en plantilla HTML

aplicación.componente.html

<p>Original date: {{originalDate}}</p> <br>
<p>Custom date: {{originalDate | customDateFormat|date :'short'}}

Aquí hemos utilizado construido en date :'short' pipe para volver a formatear el resultado.

Aquí está el resultado final:

Custom date: 4/20/18, 1:19 PM

La demostración de trabajo de muestra está disponible a continuación:

Demostración de tubería personalizada

Este ejemplo es aplicable para Angular 2,4 y cualquier versión superior de Angular. Sin embargo, también podemos crear un filtro personalizado equivalente en angular.js.

¡Feliz codificación!

Similar Posts

Leave a Reply

Your email address will not be published.