EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login
Home Software Development Software Development Tutorials AngularJS Tutorial AngularJS Date Filter
Secondary Sidebar
AngularJS Tutorial
  • AngularJS Basic and Advance
    • What is AngularJS
    • Career In AngularJS
    • Uses of Angular JS
    • AngularJS Architecture
    • Angular JS Application
    • AngularJS Application
    • AngularJS Filter Array
    • AngularJS ng-style
    • AngularJs ng init
    • AngularJs ng-repeat
    • AngularJs ng-change
    • AngularJs ng-options
    • AngularJs expressions
    • AngularJs onclick
    • AngularJS ng-show
    • AngularJs ng-include
    • Scope in AngularJS
    • AngularJS ng-if
    • AngularJS Number Filter
    • AngularJS Date Filter
    • AngularJS ng-class
    • AngularJS ng-model
    • AngularJS ng-disabled
    • AngularJS Custom Filter
    • AngularJS Validation
    • AngularJS Filters
    • Controllers in AngularJS
    • AngularJS Animations
    • AngularJS Services
    • AngularJS Events
    • AngularJS Versions
    • AngularJS Directives
    • AngularJS Unit Testing
    • AngularJS with Bootstrap
    • AngularJS UI Bootstrap
    • AngularJS Routing Example
  • Interview Question
    • Angular JS Interview Questions

AngularJS Date Filter

By Kinjal LodhaKinjal Lodha

AngularJS Date Filter

Definition of AngularJS Date Filter

AngularJS date filter is an in-built filter in AngularJS and is one of the many filters in AngularJS which can be used to convert the specified date into a formatted date based on the mentioned date format in HTML view. The formatted date will be a returned as a string and will be displayed on the HTML view which will not make any modification to the actual date value back in the controller. AngularJS date filter can also be used in the controller or any javascript file using $filter. This can be used with any HTML tag such as div, span, paragraph, select, input, etc.

Syntax:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Using in HTML view

<div> {{startDate | date : formatter : timezone}} </div>

Using in Javascript file like a controller, directive, helper

$filter(‘date’)(startDate, formatter, timezone)

ng-class directive can be used with any HTML element as well as can be used in JS file.

All in One Software Development Bundle(600+ Courses, 50+ projects)
Python TutorialC SharpJavaJavaScript
C Plus PlusSoftware TestingSQLKali Linux
Price
View Courses
600+ Online Courses | 50+ projects | 3000+ Hours | Verifiable Certificates | Lifetime Access
4.6 (86,883 ratings)

How ng-class directive works in AngularJS?

In AngularJS framework, filters in the HTML view can be used with pipe(|) symbol and mentioning which filter is needed(date, amount, etc.) also it is very important to know that all the $ is used to indicate that the Function is provided by AngularJS framework.

Date filter is used to convert the specified date to the mentioned specific format which gets rendered on the HTML view. It can be used in the HTML view as well as in the controller.

Using in HTML View

  • It formats the date and returns the string value.
  • It uses interpolation where the first parameter is the date that needs formatting, followed by a pipe (filter in Angularjs), and adding the date as key and value can be any formatter.
  • It has predefined as well as user-defined formatters can be used.
  • Formatting based on timezone is possible.

Using in any javascript file like the controller, directive, helper

  • It uses $filter(‘date’) in build function of AngularJS
  • It accepts 3parameter, the first parameter is the date that needs formatting, the second is the formatter and 3rd parameter is optional for time zone
  • It returns the formatted value in string format

One important thing to note is, if AngularJS doesn’t recognize the date format then it returns the date back in the original date format.

Some predefined and user-defined Date formatters as listed below:

Formatter Description Example
yyyy Year in 4 digit format 2019
yy Year in last 2 digit format 19
MMMM Month of the year (January-December)
MMM Month of the year(shorthand) (Jan-Dec)
MM Month of year in 2 digit no. (01-12)
M Month of year in 2 digit no. (1-12)
dd  Day in month, padded (01-31)
d Day in month (1-31)
EEEE Day in Week (Sunday-Saturday)
EEE Day in Week (shorthand) (Sun-Sat)
HH Hour in a day, padded (00-23)
H Hour in day (0-23)
hh Hour in AM/PM, padded (01-12)
h Hour in AM/PM (1-12)
mm Minute in hour, padded (00-59)
m Minute in hour (0-59)
ss Second in minute, padded (00-59)
s Second in minute (0-59)
sss Second in minute, padded (000-999)
a  AM/PM marker AM / PM
Z Timezone offset (-1200-+1200)
ww Week of year, padded (00-53) Week 01 is the week with the first Thursday of the year
w Week of year (0-53) Week 1 is the week with the first Thursday of the year
Predefined Formatters
medium Date in ‘MMM d, y h:mm:ss a’ format  Oct 13, 2020 09:15:18 PM
short M/d/yy h:mm a’ 10/13/2020 21:15
fullDate EEEE, MMMM d, y’ Friday, October 13, 2020
longDate ‘MMMM d, y’ September 3, 10
mediumDate ‘MMM d, y’ Oct 23, 20
shortDate ‘M/d/yy’ 10/23/2020
mediumTime ‘h:mm:ss a’ 9:15:18 PM
shortTime ‘h:mm a’ 9:15 PM

Examples of AngularJS Date Filter

Lets us discuss examples of AngularJS Date Filter.

Example #1

Index.html

Code:

<!doctype html>
<html ng-app="App">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<span>Today's date in dd/MM/yyyy format: <br>
{{todayDate | date:"dd/MM/yyyy"}}</span><br/>
</div>
<br>
<div ng-controller="Ctrl">
<span>Today's date in M/d/yy h:mm a format <br>
{{todayDate | date:"M/d/yy h:mm a"}}</span><br/>
</div>
<br>
<div ng-controller="Ctrl">
<span>Today's date in d/M EE format is
<br>
{{todayDate | date:"d/M EEEE"}}</span><br/>
</div>
<br>
<div ng-controller="Ctrl">
<span>Today's date current timezone is<br>
{{todayDate | date:"Z"}}</span><br/>
</div>
<br>
<div ng-controller="Ctrl">
<span>Today's date using Medium formatter
<br> {{todayDate | date:"medium"}}</span>
</div>
<br>
<div ng-controller="Ctrl">
<span>Today's date with empty value in formatter<br>
{{todayDate | date:""}}</span><br/>
<br>
</div>
<div ng-controller="Ctrl">
<span>Today's date with incorrect formatter<br>
{{todayDate | date: yyyy}}</span><br/>
</div>
</body>
</html>

Script.js

Code:

angular.module('App', []);
function Ctrl($scope) {
$scope.todayDate=new Date();
}

The above example shows how easily and in how many various different way Date Filter can be used in AngularJS. If the filter gets an invalid date format or Empty date format then it returns the same date as the input date.

Output:

AngularJS Date Filter

Conclusion

Date Filter is used for manipulating date into various different formats on the user interface so that even if back-end service send date in some other format UI application will still always show user-readable and user-friendly dates. This is also used to do date modification in the controller where the modified date can be used for further processing. There are various different formatters that can be used for Date filter and proper syntax is all that is needed and you are ready to go.

Recommended Articles

This is a guide to AngularJS Date Filter. Here we also discuss the definition and How ng-class directive works in AngularJS along with an example and its code implementation. You may also have a look at the following articles to learn more –

  1. AngularJS ng-class
  2. AngularJS ng-model
  3. AngularJS Validation
  4. AngularJS Currency Filter
Popular Course in this category
Angular JS Training Program (9 Courses, 7 Projects)
  9 Online Courses |  7 Hands-on Projects |  64+ Hours |  Verifiable Certificate of Completion
4.5
Price

View Course
0 Shares
Share
Tweet
Share
Primary Sidebar
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2022 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA
Free Software Development Course

C# Programming, Conditional Constructs, Loops, Arrays, OOPS Concept

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more