AngularJS (64 Blogs) Become a Certified Professional

How to Implement DateFilter in AngularJS with Examples

Last updated on Jun 22,2023 1.7K Views


At times we need to check the date for any particular reason. What happens is that sometimes it is in our desired format and sometimes it is not. So in tis article we will discuss DateFilter in AngularJS in the following Order:

 

     

    What is DateFilter in AngularJS?

    We can use the AngularJS date filter to convert a date into a specified format. The default date format when there is no specification is ‘MMM d,yyyy’.

    Syntax:

    {{ date | date : format : timezone }}

    It must be noted that the timezone and format parameters are optional.

     

    COMMON VALUES USED IN FORMAT

    • ‘YYYY’ – define year ex. 2018

    • ‘YY’ – define year ex. 18

    • ‘Y’ – define year ex. 2018

    • ‘MMMM’ – define month ex. March

    • ‘MMM’ – define month ex. Mar

    • ‘MM’ – define month ex. 03

    • ‘dd’ – define day ex. 08

    • ‘d’ – define day ex. 8

    • ‘hh’ – define hour in AM/PM

    • ‘h’ – define hour in AM/PM

    • ‘mm’ – define minute

    • ‘m’ – define minute

    • ‘ss’ – define second

    • ‘s’ – define second

     

    PREDEFINED VALUES USED IN FORMAT

    • “short” – equivalent to “M/d/yy h:mm a”

    • “medium” – equivalent to “MMM d, y h:mm:ss a”

    • “shortDate” – equivalent to “M/d/yy” (6/8/18)

    • “mediumDate” – equivalent to “MMM d, y” (April 7, 2018)

    • “longDate” – equivalent to “MMMM d, y” (April 7, 2019)

    • “fullDate” – equivalent to “EEEE, MMMM d, y” (Saturday, April 7, 2018)

    • “shortTime” – equivalent to “h:mm a” (4:20 AM)

    • “mediumTime” – equivalent to “h:mm:ss a” (4:20:05 AM)

     

    EXAMPLE:

    <!DOCTYPE html>

    <html>

    <head>

    <title>Date Filter</title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">

    </script>

    </head>

    <body>

    <div ng-app="firstApp" ng-controller="firstCntrl">

    <p>{{ today | date : "dd.MM.y" }}</p>

    </div>

    <script>

    var app = angular.module('firstApp', []);

    app.controller('firstCntrl', function($scope) {

    $scope.today = new Date();

    });

    </script>

    </body>

    </html>

    Output:

    10.09.2019

     

    Find out our Angular Course in Top Cities

    IndiaIndia
    Angular Training in BangaloreAngular Training in Delhi
    Angular Training in ChennaiAngular Training in Kolkata
    Angular Training in HyderabadAngular Training in Mumbai

     

    EXAMPLE:

    To display the time in a specific format, we make usage of the following code:

    <!DOCTYPE html>

    <html>

    <head>

    <title>Date Filter Ex</title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">

    </script>

    </head>

    <body>

    <div ng-app="firstApp" ng-controller="firstCntrl">

    <p>{{ today| date : 'mediumTime'}}</p>

    </div>

    <script>

    var app = angular.module('firstApp', []);

    app.controller('firstCntrl', function($scope) {

    $scope.today = new Date();

    });

    </script>

    </body>

    </html>

    Output:

    11:08:11 AM

     

    EXAMPLE:

    To display the date in a specific format, we make usage of the following code:

    <!DOCTYPE html>

    <html>

    <head>

    <title>Date Filter Ex</title>

    <script src=

    "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">

    </script>

    </head>

    <body>

    <div ng-app="firstApp" ng-controller="firstCntrl">

    <p>{{ today| date }}</p>

    </div>

    <script>

    var app = angular.module('firstApp', []);

    app.controller('firstCntrl', function($scope) {

    $scope.today = new Date();

    });

    </script>

    </body>

    </html>

    Output:

    Sep 10, 2019

     

    For a better understanding, lets take a look at the following example:

    EXAMPLE:

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <title>

    AngularJs Date Ex

    </title>

    <script

    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

    <script>

    var app = angular.module("firstApp", []);

    app.controller("firstctrl", function ($scope) {

    $scope.mydate = new Date();

    });

    </script>

    </head>

    <body ng-app="firstApp">

    <div ng-controller="firstctrl">

    Enter Number: <input type="text" ng-model="mydate" style="width:400px" /><br /><br />

    Date with short expression:{{mydate | date:"short" }}<br /><br />

    Date with mediumDate expression: {{mydate | date : "mediumDate"}} <br /><br />

    Date with yyyy-mm-dd hh:mm:ss expression: {{mydate | date : "yyyy-mm-dd hh:mm:ss" : 0}} <br /><br />

    Date with yyyy-mm-dd hh:mm:ss expression: {{mydate | date : "dd/mm/yyyy 'at' hh:mma" : 0}}

    </div>

    </body>

    </html>

    Output:

    datefilter in angularjs

    With this, we come to an end of this Datefilter in AngularJS article. I Hope you understood the various aspects of Date FIlters.

    Check out the Angular Training by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Angular is a JavaScript framework which is used to create scalable, enterprise, and performance client-side web applications. With Angular framework adoption being high, performance management of the application is community driven indirectly driving better job opportunities. The Angular Certification Training aims at covering all these new concepts around Enterprise Application Development.

    Upcoming Batches For Angular Certification Training Course Online
    Course NameDateDetails
    Angular Certification Training Course Online

    Class Starts on 21st December,2024

    21st December

    SAT&SUN (Weekend Batch)
    View Details
    Comments
    0 Comments

    Join the discussion

    Browse Categories

    webinar REGISTER FOR FREE WEBINAR
    REGISTER NOW
    webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

    Subscribe to our Newsletter, and get personalized recommendations.

    image not found!
    image not found!

    How to Implement DateFilter in AngularJS with Examples

    edureka.co