How-to: Convert Date format from /Date(xxxxxxxxxx)/ to custom format in Angular 2+

The problem

Sometimes during our development , we face issues while formatting the Date in Angular which we receive from the server side as a result of REST api call.

In the case of ASP .NET MVC , we can create a controller with an action method that returns JsonResult (Official documentation) and then call that action method from Angular as a REST api. However if there is any property with type System.DateTime in the json response from the REST api, then we receive the date in this below format -

/Date(xxxxxxxxxxxxxx)/

Usually this type of format is returned by .NET MVC json serializer while serializing DateTime value in JSON. This problem does not exists in WEB API 2 as web api uses JSON.NET for serializing the DateTime when we return HTTP response. There is no out of the box solution to convert this date to our own custom Date format in Angular using the built in DatePipe of Angular .

Therefore we need to create a custom pipe in Angular to format the date from /Date(xxxxxxxxxxxxxx)/ format to a json date object with timezone. Then we can use the built in DatePipe of angular on top of that to get the required format without splitting the date. Here is the code for the custom pipe -

The solution

Custom date pipe code

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

We need to import this custom pipe in our root module(app.module.ts) also .

Sample Component code

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

Usage in HTML template

app.component.html

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

Here we have used built in date :'short' pipe to again format the result.

Here is the final output -

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

The sample working demo is available below -

Custom pipe demo

This example is applicable for Angular 2,4 and any higher versions of Angular. However we can create an equivalent custom filter in angular.js too .

Happy coding !!