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/system@0.18.17.js"></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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Buy Books Online at Best Prices

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.