CODEWITHSUNDEEP
javascriptangular
renemundt
renemundt

Reputation: 63

angular2 date pipe locale_id period

I have a problem with the angular2 date pipe when using danish locale.

When I format a date like: 

{{myDate | date:'dd-MM-yyyy'}}

it outputs the day of the date with a suffixed period like this:

17.-03-2017

allthough I would expect it to be like this:

17-03-2017

The locale is set in the app.module like this:

providers: [ {provide: LOCALE_ID, useValue: 'da-DK'} ]

I have made this plnkr to make it more clear http://plnkr.co/edit/A5ddrKP5cmsSZ9bTqzPh

UPDATE

It probably has something to do with the way dates are formatted in danish. Se below: 

var locale = 'da-DK'; 
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; 
var date = new Date(2017,2,17); var result = new Intl.DateTimeFormat(locale, options).format(date); 
alert(result);

turns into --> fredag den 17. marts 2017

Notice the dot

Upvotes: 6

Views: 1639

Answers (3)

Pavlo Kozachuk
Pavlo Kozachuk

Reputation: 283

in module

import { registerLocaleData } from '@angular/common';
import localeDk from '@angular/common/locales/da';
import { LOCALE_ID, NgModule } from '@angular/core';

registerLocaleData(localeDk);

@NgModule({...providers: [{ provide: LOCALE_ID, useValue: 'da' }]})

in template

<div>{{ someAmountValue | currency: 'DKK':'kr.':'1.2-2' }}</div>

expected result kr. string is placed on the right side of the someAmountValue, like 40.521,00 kr.

Upvotes: 0

enne87
enne87

Reputation: 2299

You could try something like this:

{{ date | date:'ccc' | uppercase }}

Have a look at the official documentation: https://angular.io/api/common/DatePipe

There you will find all format options.

Upvotes: 0

Eddie Martinez
Eddie Martinez

Reputation: 13910

localization is "platform independent", ECMAscript provides specifications and each Javascript engine provides its own implementation.

There is also a compatibility implementation, Intl.js, which will provide the API if it doesn't already exist. You can see the implementation for the locale Danish (Denmark) here, you will see the available formats, and the day always returns the period after.

 "availableFormats": {
                "d": "d.",
                "E": "ccc",
                "Ed": "E 'den' d.",
                "Ehm": "E h.mm a",
                "EHm": "E HH.mm",
                "Ehms": "E h.mm.ss a",
                "EHms": "E HH.mm.ss",
                "Gy": "y G",
                "GyMMM": "MMM y G",
                "GyMMMd": "d. MMM y G",

You could create a custom pipe, and chain it to remove the period

{{myDate | date:'dd-MM-yyyy'|removePeriod}}

@Pipe({name: 'removePeriod'})
    export class RemovePeriodPipe implements PipeTransform {
      transform(input: string) {
        return input.replace(/\./g, '');
      }
    }

Upvotes: 2

Related Questions