Forem

Anubhab Mukherjee for This is Angular

Posted on

2 1

Built-In Angular Pipes - DatePipe - Part 2

Today we will continue to learn the remaining built-in pipes available in Angular.
If you are not familiar with Angular Pipes I would suggest you to go through this post

DatePipe
The DatePipe formats the date value and displays in a human readable form (as per the locale).

Syntax
{{ value | date [ : format [ : timezone [ : locale ] ] ] }}

It is exported from the Common Module (I will talk about it in the module section coming very soon).

You can pass the value in the form of a String or number or as date object.

Parameter the pipe accepts
format -
The way you want to display the date.
It is of string type.
It is optional.
Default value is mediumDate

timezone
The time zone what you want to display.
It is of type string type.
It is optional.
Default is undefined

locale
It represents the locale format rule
It is of type string.
It is optional.
Default is the project locale.

Now lets see in practice -

Lets open the component.ts file -
Image description

And lets add the following code -

  // Date in String
  dateInString = '01/05/2022';

  // Date in Number
  dateInNumber = Date.now();;

  // Date Object
  dateInObject = new Date();
Enter fullscreen mode Exit fullscreen mode

Now lets open the component template file and paste in the below code -

<h3>Date Pipe Demo</h3>
<p>{{ dateInString | date }}</p>
<p>{{ dateInNumber | date }}</p>
<p>{{ dateInObject | date }}</p>
Enter fullscreen mode Exit fullscreen mode

You should see the below output -
Image description
Here in the above code we are using the date Pipe to format the date or we can say we are passing the value to the date pipe to get it formatted. By default it is displayed in medium format.

format example
There are 12 different formats available by default -

  1. short
  2. medium
  3. long
  4. full
  5. shortDate
  6. mediumDate
  7. longDate
  8. fullDate
  9. shortTime
  10. mediumTime
  11. longTime
  12. fullTime

Lets paste in the below code in the template file -

<p><b>short:</b> {{ dateInString | date: "short" }}</p>
<p><b>medium:</b>{{ dateInString | date: "medium" }}</p>
<p><b>long:</b>{{ dateInString | date: "long" }}</p>
<p><b>full:</b>{{ dateInString | date: "full" }}</p>

<p><b>shortDate:</b>{{ dateInString | date: "shortDate" }}</p>
<p><b>mediumDate:</b>{{ dateInString | date: "mediumDate" }}</p>
<p><b>longDate:</b>{{ dateInString | date: "longDate" }}</p>
<p><b>fullDate:</b>{{ dateInString | date: "fullDate" }}</p>

<p><b>shortTime:</b>{{ dateInString | date: "shortTime" }}</p>
<p><b>mediumTime:</b>{{ dateInString | date: "mediumTime" }}</p>
<p><b>longTime:</b>{{ dateInString | date: "longTime" }}</p>
<p><b>fullTime:</b>{{ dateInString | date: "fullTime" }}</p>
Enter fullscreen mode Exit fullscreen mode

You should see the below output once you run the application -
Image description
Here you can see all the different forms of Date available.

timezone example
Apart from adding the format you can also pass the timezone. For example IST (Indian Standard Time) or UTC. Two ways you can pass the timezone -
Lets paste the below code in the template file -

<b>Form 1</b>
<p>{{ dateInString | date: "short":"IST" }}</p>
<b>Form 2</b>
<p>{{ dateInString | date: "short":"+0530" }}</p>
Enter fullscreen mode Exit fullscreen mode

In above cases in the first example we are passing the timezone name (like IST) and in second we are passing how much ahead or behind compared to the UTC. In both the cases you will see the same output.
If it is behind you should use '-' (negative) sign.
Image description

If you want to show the UTC time zone then you should use the below code -

<b>UTC Form 1</b>
<p>{{ dateInString | date: "short":"UTC" }}</p>
<b>UTC Form 2</b>
<p>{{ dateInString | date: "short":"+0000" }}</p>
Enter fullscreen mode Exit fullscreen mode

locale example
The third parameter is the locale which I will show in details when covering localization part.

Hope you enjoyed the post.

If yes do like comment and share.

Cheers!!!
Happy Coding

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay