How to format the date in AngularJS

Interesting piece of history:

The famous Y2K bug stemmed from programmers using two digits to represent years (e.g., “99” for 1999). It caused widespread concern as the year was about to roll over to 2000. Many systems would have interpreted “00” as 1900 instead of 2000, potentially leading to miscalculations in financial systems, expiration dates, and more. Billions of dollars were spent worldwide to patch and update legacy systems.

Formatting dates properly is important.

Properly formatting dates is crucial in web development for creating user-friendly interfaces and ensuring data consistency. AngularJS, a powerful JavaScript framework, offers built-in tools for data manipulation and formatting. In this Answer, we’ll provide a complete guide to date formatting in AngularJS. It helps enhance applications with precise and localized date representations.

Key takeaways:

  • AngularJS provides a flexible date filter for formatting dates.

  • You can use predefined formats or create custom date formats.

  • Timezone support is available for accurate global date representation.

  • Understanding date format patterns is essential for tailored date displays.

Usage

In AngularJS, we can use the following to format the date as a string:

In HTML:

{{ date_expression | date : format : timezone}}

In JavaScript:

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

where:

  • date_expression or date: It is the date that needs to be formatted.

  • format (optional): It is the formatting rule.

  • timezone: It is the applied timezone.

Date format patterns

AngularJS uses specific patterns to represent different date and time components:

Pattern

Description

Example

yyyy

Four-digit representation of the year

2024

yy

Two-digit representation of the year

24

y

Year representation (non-padded)

2024

MMMM

Full month name

September

MMM

Short month name

Sep

MM

Month in year (padded)

09

M

Month in year

9

dd

Day in month (padded)

04

d

Day in month

4

EEEE

Full weekday name

Tuesday

HH

Two-digit hour (24-hour, padded)

05

hh

Two-digit hours in AM/PM (padded)

05

h

Hours in AM/PM

5

mm

Two-digit minutes (padded)

03

m

Two-digit minutes

3

ss

Two-digit seconds (padded)

43

s

Two-digit seconds

43

sss

Milliseconds in second (padded)

548

a

AM/PM marker

AM or PM

Z

Four-digit and sign representation of timezone offset

+0500

ww

Week of the year (padded)

07

w

Week of the year

7

G or GG or GGG

The abbreviated form of the era

AD

GGGG

The long form of the era

Anno Domini

Predefined formats

AngularJS offers several predefined formats for quick implementation:

String

Pattern

Example

medium

MMM d, y, h:mm:ss a

September 24, 2024, 2:30:45 PM

short

M/d/yy h:mm a

9/24/24 2:30 p.m.

fullDate

EEEE, MMMM, d, y

Tuesday, September 24, 2024

longDate

MMMM d, y

September 24, 2024

mediumDate

MMM d, y

September 24, 2024

shortDate

M/d/yy

9/24/24

mediumTime

h:mm:ss a

2:30:45 PM

shortTime

h:mm a

2:30 p.m.

Custom text

We can also format them using literal values; however, they need to be enclosed within single quotes, e.g., “h o’clock.”

Note: Refer to the official documentationhttps://docs.angularjs.org/api/ng/filter/date for more details.

Example

Here’s an example demonstrating date formatting in AngularJS:

  • HTML
  • Output
An example of date formatting in AngularJS
Conclusion
A hands-on experience in date formatting empowers a developer to create more user-friendly and globally accessible applications. By using the built-in date filter and understanding format patterns, we can display dates in a way that best suits the project’s needs and user’s expectations.
Frequently asked questions
Haven’t found what you were looking for? Contact Us
How to format a date in AngularJS
To format a date in AngularJS, you can use the built-in date filter. Here’s the basic syntax:


{{ dateVariable | date:'format' }}



For example, to format the current date in a medium format:


{{ new Date() | date:'medium' }}



This would output something like: “Sep 24, 2024 2:30:45 PM”


You can also use custom format strings:


{{ new Date() | date:'yyyy-MM-dd HH:mm:ss' }}



This would output: “2024-09-24 14:30:45”


How to convert date into dd, mm, yyyy format in AngularJS
To convert a date into dd, mm, yyyy format in AngularJS, you can use the following format string with the date filter:


{{ dateVariable | date:'dd, MM, yyyy' }}



For example:


<p>Today's date: {{ new Date() | date:'dd, MM, yyyy' }}</p>



This would output something like: “Today’s date: 24, 09, 2024”




Note that MM gives you the month as a two-digit number (01-12). If you want the month name, use MMM for short name or MMMM for full name.




How to get date in mm dd yyyy format in Angular
To get a date in mm dd yyyy format in AngularJS, use the following format string:


{{ dateVariable | date:'MM dd yyyy' }}



For example:


<p>Date: {{ new Date() | date:'MM dd yyyy' }}</p>



This would output something like: “Date: 09 24 2024”
If you want to include separators, you can add them in the format string:


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



This would give you: “09/24/2024”


Free Resources
Copyright ©2025 Educative, Inc. All rights reserved