Using Date Formats in AngularJS

In this post I am going to show, how we can use various date formats in AngularJS. This is my 7th blog in AngularJS series.

Let’s say we have a date string and we want to display it to the users in some format. AngularJS provides many predefined date formats and custom formats to help the users in such situations. Here are the few formats that you can use, along with two customs formats at last that I have created. You can also create you own formats just like that. Here is the HTML:-

  <!-- Mar 31, 2015 8:15:36 PM -->
  <li>{{ ctrl.dateVariable | date:'medium' }}</li>

  <!-- 3/31/15 8:15 PM -->
  <li>{{ ctrl.dateVariable | date:'short' }}</li>

  <!-- Tuesday, March 31, 2015 -->
  <li>{{ ctrl.dateVariable | date:'fullDate' }}</li>

  <!-- March 31, 2015 -->
  <li>{{ ctrl.dateVariable | date:'longDate' }}</li>

  <!-- Mar 31, 2015 -->
  <li>{{ ctrl.dateVariable | date:'mediumDate' }}</li>

  <!-- 3/31/15 -->
  <li>{{ ctrl.dateVariable | date:'shortDate' }}</li>

  <!-- 8:15:36 PM -->
  <li>{{ ctrl.dateVariable | date:'mediumTime' }}</li>

  <!-- 8:15 PM -->
  <li>{{ ctrl.dateVariable | date:'shortTime' }}</li>

  <!-- Custom format #1 - 03/31/2015 @ 20:15:36 +0530 -->
  <li>{{ ctrl.dateVariable | date:"MM/dd/yyyy '@' HH:mm:ss Z" }}</li>

  <!-- Custom format #2 - It is 8 PM now -->
  <li>{{ ctrl.currentDate | date:"'It is' h a 'now'" }}</li>

The data in the expressions above would be displayed like:-

Date Formats in AngularJS

Date Formats in AngularJS

Working Demo on Plunker

That’s it! If you have any comments or suggestion about this post, I would really appreciate it.
Happy Coding 🙂


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s