Managing and formatting dates is a common requirement in web applications. Angular provides a built-in date pipe, which allows developers to format dates easily without relying on external libraries. In this article, we will explore the Angular date pipe, its usage, and how to format dates in Angular with various examples.

Understanding the Angular Date Pipe

The Angular date pipe is a built-in pipe that transforms a date object, a numeric timestamp, or an ISO string into a formatted date string according to a specified format. The date pipe is part of the @angular/common module and can be used directly in your templates.

Using the Angular Date Pipe

To use the date pipe in your Angular application, follow the general syntax:

htmlCopy code{{ date_expression | date:format:timezone }}
  • date_expression: The input date value to be formatted, which can be a date object, a numeric timestamp, or an ISO string.
  • format: (Optional) A string that defines the date format. If not specified, the default format is 'mediumDate'.
  • timezone: (Optional) A string that represents the timezone to be used for formatting the date. If not specified, the local system timezone is used.

Angular Date Pipe Formats

Angular provides a set of predefined format options for the date pipe. Here are some commonly used formats:

  1. 'short': Equivalent to 'M/d/yy, h:mm a' (e.g., 6/15/21, 9:03 AM)
  2. 'medium': Equivalent to 'MMM d, y, h:mm:ss a' (e.g., Jun 15, 2021, 9:03:01 AM)
  3. 'long': Equivalent to 'MMMM d, y, h:mm:ss a z' (e.g., June 15, 2021, 9:03:01 AM GMT+1)
  4. 'full': Equivalent to 'EEEE, MMMM d, y, h:mm:ss a zzzz' (e.g., Tuesday, June 15, 2021, 9:03:01 AM GMT+01:00)
  5. 'shortDate': Equivalent to 'M/d/yy' (e.g., 6/15/21)
  6. 'mediumDate': Equivalent to 'MMM d, y' (e.g., Jun 15, 2021)
  7. 'longDate': Equivalent to 'MMMM d, y' (e.g., June 15, 2021)
  8. 'fullDate': Equivalent to 'EEEE, MMMM d, y' (e.g., Tuesday, June 15, 2021)
  9. 'shortTime': Equivalent to 'h:mm a' (e.g., 9:03 AM)
  10. 'mediumTime': Equivalent to 'h:mm:ss a' (e.g., 9:03:01 AM)

Custom Date Formats

You can also create custom date formats using format tokens. Some commonly used format tokens are:

  • y: Year (e.g., 'yy' for 2-digit year or 'yyyy' for 4-digit year)
  • M: Month (e.g., 'M' for 1- or 2-digit month or 'MM' for 2-digit month)
  • d: Day (e.g., 'd' for 1- or 2-digit day or 'dd' for 2-digit day)
  • h: Hour (1-12)
  • H: Hour (0-23)
  • m: Minute (e.g., 'm' for 1- or 2-digit minute or 'mm' for 2-digit minute)
  • s: Second (e.g., 's' for 1- or 2-digit second or 'ss' for 2-digit second)
  • a: AM/PM marker (e.g., 'a' for AM or PM)

Examples

  1. Default date format:
htmlCopy code<p>{{ currentDate | date }}</p>
  1. Predefined date formats:
htmlCopy code<p>{{ currentDate | date:'short' }}</p>
<p>{{ currentDate | date:'medium' }}</p>
<p>{{ currentDate | date:'fullDate' }}</p>
  1. Custom date formats:
htmlCopy code<p>{{ currentDate | date:'dd/MM/yyyy' }}</p>
<p>{{ currentDate | date:'MMM d, y, h:mm a' }}</p>
  1. Using a specific timezone:
htmlCopy code<p>{{ currentDate | date:'full':'GMT' }}</p>
<p>{{ currentDate | date:'medium':'UTC' }}</p>

Conclusion

The Angular date pipe provides an easy and efficient way to format dates in your Angular application. By understanding the usage of predefined and custom date formats, you can present date and time information in a more user-friendly and localized manner. This will improve the overall user experience and make your application more accessible to users with different regional preferences.

Similar Posts