CODEWITHSUNDEEP
angulartimezonetimezone-offsetdate-pipe
Tuco
Tuco

Reputation: 1052

Angular 4 DatePipe with current timezone

So I have a component where I need to display dates received from an endpoint, but these dates are stored in UTC I believe. So I've been trying to use DatePipe to display the date in a better format, but I also need the timezone to match the current user's timezone.

<span>{{data[col.field] | date: 'short'}}</span>

I want to be able to do something like this:

<span>{{data[col.field] | date: 'short':new Date().getTimezoneOffset()}}</span>

but I believe this isn't possible and I also think Date.getTimezoneOffset() doesn't give me the right format since DatePipe expects something like '+0900'. Has anyone run into something similar?

Upvotes: 0

Views: 6654

Answers (1)

Anshuman Jaiswal
Anshuman Jaiswal

Reputation: 5462

You can use following:

Add in component

addZero(number, length){
    var str = "" + number
    while (str.length < length) {
        str = '0'+str
    }
    return str
}

readableTimeZone(offset) {
    return ((offset<0? '+':'-') + addZero(parseInt(Math.abs(offset/60)), 2) + addZero(Math.abs(offset%60), 2));
}

HTML

<span>{{data[col.field] | date: 'short':readableTimeZone(new Date().getTimezoneOffset())}}</span>

Other solution

Component 

getFormattedTimeZone() {
  return new Date().toString().match(/([A-Z]+[\+-][0-9]+.*)/)[1].split(' (')[0].replace(/[A-Z]+/,'')
}

HTML

<span>{{data[col.field] | date: 'short':getFormattedTimeZone()}}</span>

Upvotes: 2

Related Questions