Angular Date Pipe: How to Display Time in 24 Hour Format

Angular Date Pipe is a built-in pipe in Angular that is used for formatting and displaying date values. It provides an easy and convenient way to format dates in a variety of ways, including displaying the date in a different locale, time zone, or format.

The syntax of the Angular Date Pipe is as follows:

{{ date_expression | date [ : format [ : timezone [ : locale ] ] ] }}
  • date_expression: This is a JavaScript Date object or a string that represents a date. It can be a variable, a property, or a method that returns a date object.
  • format: This is an optional parameter that specifies the format of the date output. The format can be a predefined format string or a custom format string.
  • timezone: This is an optional parameter that specifies the time zone for the date output.
  • locale: This is an optional parameter that specifies the locale for the date output.

Examples of using the Angular Date Pipe:

<!-- Display the current date in the default format -->
<p>The current date is {{ currentDate | date }}</p>

<!-- Display the current date in a custom format -->
<p>The current date is {{ currentDate | date:'dd/MM/yyyy' }}</p>

<!-- Display the date in a different time zone -->
<p>The date in New York is {{ currentDate | date:'medium':'EST' }}</p>

<!-- Display the date in a different locale -->
<p>The date in Spanish is {{ currentDate | date:'fullDate':'':'es' }}</p>

In the above examples, currentDate is a JavaScript Date object. The first example displays the current date in the default format. The second example displays the current date in a custom format. The third example displays the date in the Eastern Standard Time zone. The fourth example displays the date in the Spanish language.

You may also like...

Popular Posts

Leave a Reply

Your email address will not be published. Required fields are marked *