Import
import { BbDatePipeModule } from '@backbase/ui-ang/date-pipe'
Usage
Use the bbDate pipe to format date values. The pipe accepts a date value and optional format, timezone, and locale parameters.
<!-- Basic date formatting -->
<p>{{ '2018-12-03T15:29:14' | bbDate }}</p>
With format
The pipe supports predefined Angular date formats and a custom bbShort format.
<!-- Using a predefined format -->
<p>{{ '2018-12-03T15:29:14' | bbDate : 'fullDate' }}</p>
<!-- Using fullTime format -->
<p>{{ '2018-12-03T15:29:14' | bbDate : 'fullTime' }}</p>
With timezone
Specify a timezone to format the date in a different time zone.
<!-- Date with timezone -->
<p>{{ '2018-12-03T15:29:14' | bbDate : 'fullDate' : 'GMT+1100' }}</p>
With custom format
The bbShort format provides a localized date and time format pattern.
<!-- Custom bbShort format -->
<p>{{ '2018-12-03T15:29:14' | bbDate : 'bbShort' }}</p>
Parameters
|
Parameter |
Type |
Description |
|---|---|---|
|
format |
DateFormat | string |
Format string or predefined format name |
|
locale |
string |
Locale code for formatting |
|
timezone |
string |
Timezone offset or name |
|
value (required) |
any |
The date value to format |
format
The format parameter determines how the date is displayed. It accepts predefined Angular format strings or a custom format pattern.
Predefined format values include: 'short', 'medium', 'long', 'full', 'shortDate', 'mediumDate', 'longDate', 'fullDate', 'shortTime', 'mediumTime', 'longTime', 'fullTime'.
The custom 'bbShort' format displays the date in the pattern 'MMMM d, y at HH:mm' localized according to the current locale.
If not provided, defaults to 'mediumDate' or the value set via DATE_PIPE_CONFIG or DATE_PIPE_DEFAULT_OPTIONS.
<!-- Using predefined format -->
<p>{{ '2018-12-03T15:29:14' | bbDate : 'fullDate' }}</p>
<!-- Using custom bbShort format -->
<p>{{ '2018-12-03T15:29:14' | bbDate : 'bbShort' }}</p>
<!-- Using custom pattern -->
<p>{{ '2018-12-03T15:29:14' | bbDate : 'yyyy-MM-dd' }}</p>
locale
The locale parameter overrides the default locale for formatting this specific date.
If not provided, uses the locale set via the LOCALE_ID token.
<!-- With specific locale -->
<p>{{ '2018-12-03T15:29:14' | bbDate : 'fullDate' : undefined : 'fr-FR' }}</p>
timezone
The timezone parameter specifies the timezone for formatting. It accepts timezone offsets (e.g., '+0430') or timezone names (e.g., 'GMT+1100').
If not provided, uses the value set via DATE_PIPE_DEFAULT_OPTIONS or the system's default timezone.
<!-- With timezone offset -->
<p>{{ '2018-12-03T15:29:14' | bbDate : 'fullDate' : '+0530' }}</p>
<!-- With timezone name -->
<p>{{ '2018-12-03T15:29:14' | bbDate : 'fullDate' : 'GMT+1100' }}</p>
value
The value parameter accepts the date to be formatted. It can be a Date object, number (timestamp), or ISO 8601 string.
<!-- ISO string -->
<p>{{ '2018-12-03T15:29:14' | bbDate }}</p>
<!-- Timestamp -->
<p>{{ 1543851554000 | bbDate }}</p>
Global configuration
Locale token
The LOCALE_ID token sets the same locale for all instances of the date pipe in the project. Refer to the Angular LOCALE_ID documentation for more information.
import { LOCALE_ID } from '@angular/core';
@NgModule({
providers: [
{ provide: LOCALE_ID, useValue: 'en-US' }
]
})
export class AppModule {}
Default timezone and format option
The DATE_PIPE_DEFAULT_OPTIONS token sets the default timezone and date format for all instances of the date pipe in the project. Refer to the Angular DATE_PIPE_DEFAULT_OPTIONS documentation for more information.
import { DATE_PIPE_DEFAULT_OPTIONS } from '@angular/common';
@NgModule({
providers: [
{
provide: DATE_PIPE_DEFAULT_OPTIONS,
useValue: {
dateFormat: 'shortDate',
timezone: 'GMT+0000'
}
}
]
})
export class AppModule {}
Format configuration token
The DATE_PIPE_CONFIG token enables globally setting the format for all instances of the date pipe in the project.
import { DATE_PIPE_CONFIG, DateFormat } from '@backbase/ui-ang/date-pipe';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule, {
providers: [{ provide: DATE_PIPE_CONFIG, useValue: { format: DateFormat.short } }]
});