1

Hi I want to change date format according to the choosed language, I use ng2-translate and this is my working code but it is static:

<span> {{product[col.field] | date : 'dd-MM-yyyy' >}} </span>

I want to have a format date in a current language, something like this:

<span> {{product[col.field] | date : 'DATE.PIPE' | translate >}} </span>

where in the en.json I have"DATE": { "PIPE": "MM-dd-yyyy" and in it.json I have "DATE": { "PIPE": "dd-MM-yyyy" Is it possible? or is there a way to change format date programmatically?

Alessandro Celeghin
  • 4,039
  • 14
  • 49
  • 95

3 Answers3

2

Just remove the single quotes from the date pipe aka

<span> {{product[col.field] | date : DATE.PIPE | translate >}} </span>

The reason it doesn't work is because single quotes make the variable name a string and it tries to pipe it as DATE.PIPE format but the format with such name doesn't exist. Hope it makes sense.

Here is an example code

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  dateFormat = {
    date: {
      pipe: 'dd-MM-yyyy'
  }
};
  today = Date.now();
}

app.component.html

<span> {{today | date: dateFormat.date.pipe}} </span>
Nikki Kononov
  • 549
  • 1
  • 8
  • 20
  • it seems doesn't work `Cannot read property 'PIPE' of undefined at Object.eval [as updateRenderer] (HomeComponent.html:30)` – Alessandro Celeghin Apr 11 '17 at 09:04
  • That simply means that the object is not defined which you are trying to access. Show the code where/how you are getting the DATE.PIPE. – Nikki Kononov Apr 11 '17 at 09:05
  • `{ "HOME": { "TITLE": "Hello Angular 2 with ng2-translate!", "LOGIN": "Login", "USERNAME":"Username", "USERNAMEREQ":"Username required", "PASSWORDREQ":"Password required", "SELECT": "Change language", "BUTTON": "Login" }, "DATE": { "PIPE": "MM-dd-yyyy" } }` – Alessandro Celeghin Apr 11 '17 at 09:07
  • 1
    I update my answer to show the example with an object. I wanted to see how you get the object or how do you initialize it. Cause PIPE undefined clearly means that the object does not exist. – Nikki Kononov Apr 11 '17 at 09:10
  • It is a table with lazyload `private loadProductsLazy(event: LazyLoadEvent) { this.userService.getAll(event).subscribe(products => { this.products = products.content; this.totalRecords = products.page.totalElements;}) }` if I use your example it works, but not if I use DATE.PIPE | translate – Alessandro Celeghin Apr 11 '17 at 09:15
  • Can't tell without seeing rest of the code but I'd say this needs to be called in ngOnInit method. The problem I see is that you accept an event request which explains why you get the error, there is no object until a function with an event is called thus the PIPE undefined. You will need to get the data before the page is rendered or extract date format somehow before you get rest of your records in ngOnInit method, so either get all the data in ngOnInit like this https://pastebin.com/Y0hTD5m8 or define date format separately. – Nikki Kononov Apr 11 '17 at 09:19
  • Ok but in ngOnInit event is all undefined, so my http.get can't have the correct parameters – Alessandro Celeghin Apr 11 '17 at 09:37
  • As I mentioned, you either get the date separately from the rest of the data or better yet pre-assign the date format and then use async pipe to trigger change when the format changes. https://angular.io/docs/ts/latest/api/common/index/AsyncPipe-pipe.html – Nikki Kononov Apr 11 '17 at 09:40
  • We are getting off track here if you are having troubles figuring out how to get the data or what are your options to pass the pipe info open up another issue. Original issue is fixed so would you please mark the answer as correct. – Nikki Kononov Apr 11 '17 at 09:42
2

You just need to put the translation part into brackets:

{{ product[col.field] | date : ('DATE.PIPE' | translate) }}

If you don't, the date pipe takes 'DATE.PIPE' string as its date format.

Ján Halaša
  • 8,167
  • 1
  • 36
  • 36
  • it seems doesn't work `Cannot read property 'PIPE' of undefined at Object.eval [as updateRenderer] (HomeComponent.html:30)` and some other error – Alessandro Celeghin Apr 11 '17 at 09:24
  • Did you put `DATE.PIPE` into apostrophes - as a string? I tried that in an existing application and it worked well. – Ján Halaša Apr 11 '17 at 09:28
  • Read my other comment. Your current issue has nothing to do with the date pipe. The object is not initialised when you try to access it. You need to get the data either on ngOnInit method or get the date format before you get other info. – Nikki Kononov Apr 11 '17 at 09:31
  • ok now I don't have errors but it show this result [link](https://drive.google.com/open?id=0B_she6Q8vsHrS0Q5eUw4c3RFMEE) – Alessandro Celeghin Apr 11 '17 at 09:35
  • You probably don't have the `'DATE.PIPE'` key correctly defined in your localization JSON files. Try to get just `{{ 'DATE.PIPE' | translate }}` whether it displays a correct format or just the `DATE.PIPE` string. – Ján Halaša Apr 11 '17 at 09:41
  • yes now it works, I just need to restart the application this instructions works good ` {{product[col.field] | date : ('DATE.PIPE' | translate) }} ` – Alessandro Celeghin Apr 11 '17 at 09:53
0

Try to use some moment.js, it have a translate/locale setting that change the timezone automaticly and stuf

Moment js

docs of moment js

Elty
  • 72
  • 1
  • 13