Skip to content

Latest commit

 

History

History
89 lines (63 loc) · 3.88 KB

localized-date.pipe.md

File metadata and controls

89 lines (63 loc) · 3.88 KB
Title Added Status
Localized Date pipe
v3.3.0
Active

Localized Date Pipe

Converts a date to a given format and locale.

Basic Usage

<div>
    Created date: {{ date | adfLocalizedDate }}
</div>

Properties

Name Type Default value Description
format string 'medium' A format to apply to the date value. Date Pipe Formats.
locale string 'en-US' A locale id for the locale format rules to use.
timezone string (optional) A timezone offset (such as '+0430'), or a standard UTC/GMT

Details

The pipe takes a date and formats it and localizes it so the date is displayed in the proper format for the region. It uses the Angular Date Pipe so all the pre-defined and custom formats can be used.

To localize the dates in your application, you will need to add the specific locale file for your region in order to use it. Read more about internationalization here.

For example, if you want to add the japanese date localization in your ADF app you can add in your app.module.ts:

import { registerLocaleData } from '@angular/common';
import localeJa from '@angular/common/locales/ja';

registerLocaleData(localeJa);

Default values

You can overwrite the default values of this pipe by adding these properties to your app.config.json:

{
    "dateValues": {
        "defaultDateFormat": "mediumDate",
        "defaultDateTimeFormat": "MMM d, y, H:mm",
        "defaultLocale": "en-US"
    }
}
Name Type Description
defaultDateFormat string The format to apply to date values
defaultDateTimeFormat string The format to apply to date-time values
defaultLocale string The locale id to apply

This configuration overwrites the values in the localized date pipe as well as other components to have more consistency across your app. However, you can still overwrite these values any time by using the pipe in your code.

Eliminates timezone-specific shifts

When timezone is set to UTC, it eliminates timezone-specific shifts, meaning the date will be displayed in Coordinated Universal Time (UTC) regardless of the local timezone.

Given the date 2025-01-09T00:00:00.000+0000, if the local timezone has a negative offset like -6 hours, the local time would be 2025-01-08T18:00:00.000-0600. Without setting the timezone to UTC, the pipe would display the date as January 8th, 2025, because the local time is still on the previous day.

By setting the timezone to UTC in the pipe, the date will be displayed as January 9th, 2025, because it ignores the local timezone offset and uses the UTC time instead.

Usage example:

<!-- Local timezone with -6 offset -->
<div>
    Created date: {{ '2025-01-09T00:00:00.000+0000' | adfLocalizedDate: 'mediumDate' }}
    <!-- Output: Jan 8, 2025 (if local timezone is -6) -->
</div>

<!-- Setting timezone to UTC -->
<div>
    Created date: {{ '2025-01-09T00:00:00.000+0000' | adfLocalizedDate: 'mediumDate' : '' : 'UTC' }}
    <!-- Output: Jan 9, 2025 (UTC) -->
</div>

By specifying UTC as the timezone, the pipe ensures that the date is displayed consistently in UTC, eliminating any discrepancies caused by local timezone offsets.