web-ui: creation of explorerDatetime pipe to show the same date format

web-ui/src/app/app.module.ts

@@ -44,6 +44,7 @@ import { TransactionRawComponent } from './components/transaction-raw/transactio
 import { TransactionComponent } from './components/transaction/transaction.component';
 import { BlockComponent } from './components/block/block.component';
 import { BlockRawComponent } from './components/block-raw/block-raw.component';
+import { ExplorerDatetimePipe } from './pipes/explorer-datetime.pipe';
 
 @NgModule({
   declarations: [
@@ -63,7 +64,8 @@ import { BlockRawComponent } from './components/block-raw/block-raw.component';
     TransactionRawComponent,
     TransactionComponent,
     BlockComponent,
-    BlockRawComponent
+    BlockRawComponent,
+    ExplorerDatetimePipe
   ],
   imports: [
     AppRoutingModule,

web-ui/src/app/pipes/explorer-datetime.pipe.spec.ts

@@ -0,0 +1,39 @@
+import { ExplorerDatetimePipe } from './explorer-datetime.pipe';
+import { pipeDef } from '../../../node_modules/@angular/core/src/view';
+
+describe('ExplorerDatetimePipe', () => {
+
+  beforeAll(() => {
+    jasmine.clock().install();
+  });
+
+  afterAll(() => {
+    jasmine.clock().uninstall();
+  });
+
+  it('create an instance', () => {
+    const pipe = new ExplorerDatetimePipe('en');
+    expect(pipe).toBeTruthy();
+  });
+
+  it('should return the parsed date when a Date object is sent', () => {
+    const pipe = new ExplorerDatetimePipe('en');
+    const date = new Date('1990-02-25');
+
+    expect(pipe.transform(date)).toMatch('February 24, 1990, 6:00:00 PM');
+  });
+
+  it('should return the parsed date when a number is sent', () => {
+    const pipe = new ExplorerDatetimePipe('en');
+    const dateInMs = new Date('August 19, 1975 23:15:30').getTime();
+
+    expect(pipe.transform(dateInMs)).toMatch('August 19, 1975, 11:15:30 PM')
+  });
+
+  it('should return the parsed date when a string is sent', () => {
+    const pipe = new ExplorerDatetimePipe('en');
+    const stringDate = 'August 19, 1975 23:15:30';
+
+    expect(pipe.transform(stringDate)).toMatch('August 19, 1975, 11:15:30 PM')
+  });
+});

web-ui/src/app/pipes/explorer-datetime.pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DatePipe } from '@angular/common'
+
+@Pipe({
+  name: 'explorerDatetime'
+})
+export class ExplorerDatetimePipe extends DatePipe implements PipeTransform {
+  private calendarDateFormat = 'MMMM d, y, h:mm:ss a';
+
+  transform(datetime: any): string {
+    return super.transform(datetime, this.calendarDateFormat);
+  }
+}