ng-date-format

Angular date format pipe

Description

Date format pipe for all tipes of date data values with __Angular6__ versions.

Installation

To install this component to an external project, follow the procedure:

1. __npm install ng-date-format --save__

2. Add __DateFormatModule__ import to your __@NgModule__ like example below
``ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DateFormatModule, DatePipe } from 'ng-date-format';

@NgModule({
imports: [ BrowserModule, DateFormatModule ],
declarations: [ AppComponent ],
providers: [ DatePipe ],
bootstrap: [ AppComponent ]
})
export class AppModule {}
`

3. If you are using __systemjs__ package loader add the following mydatepicker properties to the __System.config__:
`js
(function (global) {
System.config({
paths: {
'npm:': 'node_modules/'
},
map: {
// Other components are here...

'ng-date-format': 'npm:ng-date-format/bundles/ng-date-format.umd.min.js'
},
packages: {
}
});
})(this);
`

Usage

Use one of the following two options.

$3

In html template use for
__Milisecond__
{{1538041238172 | date: 'mediumDate'}}
__Timestamp__
{{1538040936 | date: 'mediumDate'}}
__Date String__
{{'2015-03-25T12:00:00' | date: 'mediumDate'}}

`ts
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
public dateObj: any = {
dateMs: 1538041238172,
dateTs: 1538040936,
dateTime: "2015-03-25T12:00:00"
};
}
`

`html


• 
  
  
  Miliseconds
  

  {{dateObj?.dateMs | date: 'dd-MM-yyyy'}}

  
  
  
  


• 
  
  
  Timestamp
  

  {{dateObj?.dateTs | date}}

  
  
  
  


• 
  
  
  Date ISO
  

  {{dateObj?.dateTime | date}}

  
  
  
  


`

$3

`ts
import { Component, OnInit } from '@angular/core';
import { DatePipe } from 'ng-date-format';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor(
private datePipe: DatePipe
) {}

ngOnInit() {
const dateMs = this.datePipe.transform(1538041238172, 'mediumDate');
const dateTs = this.datePipe.transform(1538040936, 'mediumDate');
const dateDt = this.datePipe.transform('2015-03-25T12:00:00', 'mediumDate');
console.log(dateMs);
console.log(dateTs);
console.log(dateDt);
}
}
``

Pre-defined format options

Examples are given in en-US locale.
* 'short': equivalent to 'M/d/yy, h:mm a' (6/15/15, 9:03 AM).
* 'medium': equivalent to 'MMM d, y, h:mm:ss a' (Jun 15, 2015, 9:03:01 AM).
* 'long': equivalent to 'MMMM d, y, h:mm:ss a z' (June 15, 2015 at 9:03:01 AM GMT+1).
* 'full': equivalent to 'EEEE, MMMM d, y, h:mm:ss a zzzz' (Monday, June 15, 2015 at 9:03:01 AM GMT+01:00).
* 'shortDate': equivalent to 'M/d/yy' (6/15/15).
* 'mediumDate': equivalent to 'MMM d, y' (Jun 15, 2015).
* 'longDate': equivalent to 'MMMM d, y' (June 15, 2015).
* 'fullDate': equivalent to 'EEEE, MMMM d, y' (Monday, June 15, 2015).
* 'shortTime': equivalent to 'h:mm a' (9:03 AM).
* 'mediumTime': equivalent to 'h:mm:ss a' (9:03:01 AM).
* 'longTime': equivalent to 'h:mm:ss a z' (9:03:01 AM GMT+1).
* 'fullTime': equivalent to 'h:mm:ss a zzzz' (9:03:01 AM GMT+01:00).

$3

You can construct a format string using symbols to specify the components of a date-time value, as described in the following table. Format details depend on the locale. Fields marked with (*) are only available in the extra data set for the given locale.

| Field type | Format | Description | Example Value |
| :------------ | :------------ | :------------ | :------------ |
| Era|G, GG & GGG|Abbreviated|AD|
| |GGGG|Wide|Anno Domini|
| |GGGGG|Narrow|A|
| Year|y|Numeric: minimum digits|2, 20, 201, 2017, 20173|
| |yy|Numeric: 2 digits + zero padded|02, 20, 01, 17, 73|
| |yyy|Numeric: 3 digits + zero padded|002, 020, 201, 2017, 20173|
| |yyyy|Numeric: 4 digits or more + zero padded|0002, 0020, 0201, 2017, 20173|
| Month|M|Numeric: 1 digit|9, 12|
| |MM|Numeric: 2 digits + zero padded|09, 12|
| |MMM|Abbreviated|Sep|
| |MMMM|Wide|September|
| |MMMMM|Narrow|S|
| Month standalone|L|Numeric: 1 digit|9, 12|
| |LL|Numeric: 2 digits + zero padded|09, 12|
| |LLL|Abbreviated|Sep|
| |LLLL|Wide|September|
| |LLLLL|Narrow|S|
| Week of year|w|Numeric: minimum digits|1... 53|
| |ww|Numeric: 2 digits + zero padded|01... 53|
| Week of month|W|Numeric: 1 digit|1... 5|
| Day of month|d|Numeric: minimum digits|1|
| |dd|Numeric: 2 digits + zero padded|01|
| Week day|E, EE & EEE|Abbreviated|Tue|
| |EEEE|Wide|Tuesday|
| |EEEEE|Narrow|T|
| |EEEEEE|Short|Tu|
| Period|a, aa & aaa|Abbreviated|am/pm or AM/PM|
| |aaaa|Wide (fallback to a when missing)|ante meridiem/post meridiem|
| |aaaaa|Narrow|a/p|
| Period*|B, BB & BBB|Abbreviated|mid.|
| |BBBB|Wide|am, pm, midnight, noon, morning, afternoon, evening, night|
| |BBBBB|Narrow|md|
| Period standalone*|b, bb & bbb|Abbreviated|mid.|
| |bbbb|Wide|am, pm, midnight, noon, morning, afternoon, evening, night|
| |bbbbb|Narrow|md|
| Hour 1-12|h|Numeric: minimum digits|1, 12|
| |hh|Numeric: 2 digits + zero padded|01, 12|
| Hour 0-23|H|Numeric: minimum digits|0, 23|
| |HH|Numeric: 2 digits + zero padded|00, 23|
| Minute|m|Numeric: minimum digits|8, 59|
| |mm|Numeric: 2 digits + zero padded|08, 59|
| Second|s|Numeric: minimum digits|0... 59|
| |ss|Numeric: 2 digits + zero padded|00... 59|
| Fractional seconds|S|Numeric: 1 digit|0... 9|
| |SS|Numeric: 2 digits + zero padded|00... 99|
| |SSS|Numeric: 3 digits + zero padded (= milliseconds)|000... 999|
| Zone|z, zz & zzz|Short specific non location format (fallback to O)|GMT-8|
| |zzzz|Long specific non location format (fallback to OOOO)|GMT-08:00|
| |Z, ZZ & ZZZ|ISO8601 basic format|-0800|
| |ZZZZ|Long localized GMT format|GMT-8:00|
| |ZZZZZ|ISO8601 extended format + Z indicator for offset 0 (= XXXXX)|-08:00|
| |O, OO & OOO|Short localized GMT format|GMT-8|
| |OOOO|Long localized GMT format|GMT-08:00|

License

* License: MIT

Author

* Author: SUVOJIT

Keywords

* Date Pipe
* Angular V6