KnowledgeBase / AngularTraining · Wiki

Formatting Datetime:

Using angular's built-in Date Pipe:

https://angular.io/docs/ts/latest/api/common/index/DatePipe-pipe.html

Usage:

{{ dateObj | date }}               // output is 'Jun 15, 2015'
{{ dateObj | date:'medium' }}      // output is 'Jun 15, 2015, 9:43:11 PM'
{{ dateObj | date:'shortTime' }}   // output is '9:43 PM'
{{ dateObj | date:'mmss' }}        // output is '43:11'

Using humanize:

npm install humanize

import { humanize } from 'humanize';
...
...
humanize.date(format, new Date(value))

Create custom pipe with humanize:

[format-datetime.pipe.ts]

import { Pipe, PipeTransform } from '@angular/core';
import { humanize } from 'humanize';

@Pipe({ name: 'FormatDatetime' })
export class FormatDatetime implements PipeTransform {
    transform(value: string, format: string): string {
        return humanize.date(format, new Date(value));
    }
}

[app.module.ts]

import { FormatDatetime } from './pipes/format-datetime.pipe';

@NgModule({
  declarations: [
    ...,
    ...,
    FormatDatetime,
  ],

Usage: [mypage.component.html]

  {{myDateTime | FormatDatetime:'jS M, H:m'}}

References:

https://www.npmjs.com/package/humanize
https://runkit.com/592fff4064e48800121828df/593a586fba06ef0013c865d9
https://npm.runkit.com/humanize
http://php.net/manual/en/function.date.php (Formats)
https://angular.io/docs/ts/latest/guide/pipes.html