How to Use a date Filter in AngularJS? - Inject AngularJS date Filter in Controller using JavaScript

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.

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

Try it yourself.


{{ datevalue | date : 'fullDate'}}



{{ datevalue1 | date : 'shortDate'}}



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

Also Read: How to Transform Text to Uppercase in AngularJS?

* 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.

Add Format to “date” Filter, Explicitly

The Markup
<div ng-app="dateApp" ng-controller="dateController">

    <p> {{ result }} </p>

</div>
The Script
<script>
    var dtApp = angular.module('dateApp', []);

    dtApp.controller(
        'dateController',
        function ($scope, $filter) {

            $scope.result = $filter('date')(new Date(), 'fullDate');
        }
    );
</script>

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

Also Read: Understand AngularJS Filters with Examples

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
<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>
The Script
<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>

Demo

That’s it. Hope you find this article and its example useful. If you have any queries, please leave a message below. Don’t forget to share this article with your friends on Twitter or Facebook.

Thanks for reading.

Previous - AngularJS “currency” FilterNext - AngularJS “orderBy” Filter


Related Posts:

Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner
Tweet this article Facebook Google+
comments powered by Disqus

Join our Google Plus Community and be a part of a discussion!