In AngularJS, the “date” filter formats a text to a given date format. You can check the AngularJS Docs for a detail summary of its in-built date formatting functions. It provides various formats, which you may add with the filter to get a desired result.

If you are new to AngularJS, then I recommend you to read my first article that I have written for beginners.

Previously, I have explained with examples about (it's an introduction about filters in AngularJS). In that post, I have also covered briefly about various filters such as (using decimals too), uppercase filter and lowercase filter. Later, I have written a post each about the (covers how to inject currency in a controller) and .

In this article too, I’ll show you how you can add the date filter to an HTML template using an expression. In the later part of this article, I’ll show you how to Inject the “date” filter to a controller using JavaScript.

See this demo

The date filter supports the below mentioned formats.

a) medium

b) short

c) fullDate

d) longDate

e) shortDate

f) mediumTime

g) shortTime

Syntax (Using an Expression)

{{ date_expression | date : format : timezone}}

AngularJS Filter “date” using an Expression

For example, I wish to display the date using fullDate format.

<div ng-app> <p> <label>Select a date</label> <input type="date" id="date" ng-model="datevalue" /> </p> <p> {{ datevalue | date : ' fullDate '}} </p> </div>

In the above method, I am using , to select a date. Be adviced, the <input> type “date” does not work with many browsers. However, it works fine using Chrome.

In the next part of this article, I have written the using JavaScript. Don’t miss that article.

Similarly, you may try using the shortDate format too.

<div ng-app> <p> <label>Select a date</label> <input type="date" id="date" ng-model="datevalue" /> </p> <p> {{ datevalue | date : 'shortDate'}} </p> </div>

Along with above-mentioned formats, you can format a string using standard date formats such as, MM/dd/yyyy or dd/MM/yyyy etc. Simply, add the format after the date filter, as I have shown in the above examples.

<p> <label>Select a date</label> <input type="date" id="date" ng-model="datevalue" /> </p> <p> {{ datevalue | date : 'dd/MM/yyyy'}} </p>

👉 See this Demo

Select a date for “fullDate” format:

{{ datevalue | date : 'fullDate'}} Select a date for “shortDate” format:

{{ datevalue1 | date : 'shortDate'}} Select a date for “dd/MM/yyyy” format:

{{ datevalue2 | date : 'dd/MM/yyyy'}}

Also Read:

This process is common among all AngularJS filters. First, check the syntax for the filter.

Syntax

$filter('date')(date_value, format, timezone)

The above syntax speaks for itself. First, the filter date, which is followed by the date_value, the format at which you may want to display the date and finally the timezone.

You may add the filter with its formats explicitly or dynamically.

Format to date Filter, explicitly

The Markup

<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script> </head> <body> <div ng-app="dateApp" ng-controller="dateController"> <p> {{ result }} </p> </div> </body> <script> var dtApp = angular.module('dateApp', []); dtApp.controller( 'dateController', function ($scope, $filter) { $scope.result = $filter('date')(new Date(), ' fullDate '); } ); </script> </html> Try it

In the explicit method, I have defined the fullDate format with the date filter followed by adding the system date as the value.

👉



Dynamically Add Formats to the “date” Filter

Now, let’s take this to the next level and add some dynamic features to it. I want to choose a “format” from a pre-defined set of values. For this, I have added a <select> element with few values in it.

The Markup

<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script> </head> <body> <div ng-app ="dateApp" ng-controller ="dateController"> <p> Choose a Date format <select ng-model="datevalue"> <option value="dd/MM/yyyy">dd/MM/yyyy</option> <option value="fullDate">Full Date</option> <option value="shortDate">Short Date</option> </select> </p> <p> {{ result }} </p> </div> </body> <script> var dtApp = angular.module('dateApp', []); dtApp.controller('dateController', function ($scope, $filter) { $scope. $watch ('datevalue', function (val) { $scope.result = $filter ('date')(new Date(), val); }, true); } ); </script> </html> Try it

👉



That’s it. Hope you find this article and its example useful. Don’t forget to share this article with your friends on Twitter or Facebook.

Thanks for reading. ☺

See this demo

← PreviousNext →