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';

    selector: 'dateTime'

    templateUrl: 'dates.html'

    // date controller
class Dates {
     date: Date;

    //date constructor
    constructor() { = new Date();

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>
    <script src="[email protected]"></script>
    <script src=""></script>
            paths: {
                'main.js': 'main.js'


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 - and
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like Powered by Blogger.
ASK Questions