How to use Date Filter in Angularjs

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.

AngularJS Tutorial for Beginners – My First AngularJS App “Hello World”

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

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)

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 HTML5 <input> type “date”, 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 “date” formatting procedure in a Controller 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:

Select a date for “shortDate” format:

Select a date for “dd/MM/yyyy” format:

* Injecting “date” filter in a Controller using JavaScript

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.

👉 What are Filters in AngularJS and how to impliment filters in an application.

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

👉 How to get the Day of Week or Weekday from a Date using AngularJS date Filter | Convert Weekday to Number in AngularJS Controller

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.

See this demo

← PreviousNext →