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

   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:

   (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.

1. in html template

In html template use for Milisecond {{1538041238172 | date: 'mediumDate'}} Timestamp {{1538040936 | date: 'mediumDate'}} Date String {{'2015-03-25T12:00:00' | date: 'mediumDate'}}

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

<ul>
	<li>
		<div class="form-group">
			<label for="" class="control-label">Miliseconds</label>
			<div class="form-control">{{dateObj?.dateMs | date: 'dd-MM-yyyy'}}</div>
		</div>
	</li>
	<li>
		<div class="form-group">
			<label for="" class="control-label">Timestamp</label>
			<div class="form-control">{{dateObj?.dateTs | date}}</div>
		</div>
	</li>
	<li>
		<div class="form-group">
			<label for="" class="control-label">Date ISO</label>
			<div class="form-control">{{dateObj?.dateTime | date}}</div>
		</div>
	</li>
</ul>

2. in component

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).

Custom format options

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