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:-

<ul>
  <!-- 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>
</ul>

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

Date Formats in AngularJS

Date Formats in AngularJS

Demo:
Working Demo on Plunker

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

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s