Angular 2 date format

Angular 2 date format

Hello everyone, I am going to share the code sample of date format using ES6 and Angular 2. The example in detail as given below.

ES6 code-sample

import {Component, View, bootstrap} from 'angular2/angular2';

@Component({
    selector: 'dateTime'
})

@View({
    templateUrl: 'dates.html'
})

    // date controller
class Dates {
     date: Date;

    //date constructor
    constructor() {
        this.date = new Date();
    }
}
bootstrap(Dates);

Dates HTML Template

<!-- dates.html -->
<h1>Date Time</h1>
<p>{{date | date:'dd MM yyyy'}}</p>
<p>{{date | date:'dd MM yyyy hh:mm'}}</p>
<p>{{date | date:'dd MM yyyy hh:mm:ss'}}</p>
<p>{{date | date:'MM dd yy'}}</p>
<p>{{date | date:'MM dd yyyy'}}</p>
<p>{{date | date:'mediumDate'}}</p>
<p>{{date | date:'yMMMMd'}}</p>
<p>{{date | date:'shortTime'}}</p>

AngularJs, HTML with ES6 example code

<!DOCTYPE html>
<html>
<head>
    <script src="https://jspm.io/[email protected]"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.37/angular2.min.js"></script>
    <script>
        System.config({
            paths: {
                'main.js': 'main.js'
            }
        });
        System.import('main.js');
    </script>
</head>
<body>
    <datetime></datetime>
</body>
</html>





ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.