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.

License

• License: MIT

Author

• Author: SUVOJIT

Keywords

• Date Pipe
• Angular V6