Angular New Date Format Code Example

Example 1: angular date formats

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

Example 2: pipe of date angular

content_copy        {{ dateObj | date }}               // output is 'Jun 15, 2015' {{ dateObj | date:'medium' }}      // output is 'Jun 15, 2015, 9:43:11 PM' {{ dateObj | date:'shortTime' }}   // output is '9:43 PM' {{ dateObj | date:'mm:ss' }}       // output is '43:11'

Example 3: angular get current date yyyy-mm-dd

import { DatePipe } from '@angular/common';  @Component({     templateUrl: './name.component.html',     styleUrls: ['./name.component.scss'],     providers: [DatePipe] })  myDate = new Date(); constructor(private datePipe: DatePipe){     this.myDate = this.datePipe.transform(this.myDate, 'yyyy-MM-dd'); }

Example 4: date format angular

content_copy              @Component({  selector: 'date-pipe',  template: `<div>    <p>Today is {{today | date}}</p>    <p>Or if you prefer, {{today | date:'fullDate'}}</p>    <p>The time is {{today | date:'h:mm a z'}}</p>  </div>` }) // Get the current date and time as a date-time value. export class DatePipeComponent {   today: number = Date.now(); }