Convert date to eastern time zone with Angular - angularjs

I'm getting data back from the server like this:
'2015-03-05T16:51:56+00:00'
Using Angular, I'd like to display this date/time as an Eastern Time date. Is there a way to specify a different timezone with Angular? I'm doing something like:
{{ myDate | date: 'medium' }}
Which gives back:
Mar 5, 2015 11:51:56 AM
But I'd like it to display as:
Mar 5, 2015 4:51:56 PM

From the angularJS dateFilter docs
timezone (optional) string
Timezone to be used for formatting. It understands UTC/GMT and the continental US time zone abbreviations, but for general use, use a time zone offset, for example, '+0430' (4 hours, 30 minutes east of the Greenwich meridian) If not specified, the timezone of the browser will be used.
So try:
{{ myDate | date: 'medium' : -0500 }}

The syntax for the date filter in HTML template binding since 1.3 allows for an optional timezone field:
{{ date_expression | date : format : timezone}}
However, 1.3 only supports the UTC timeszone.
Timezone to be used for formatting. Right now, only 'UTC' is
supported. If not specified, the timezone of the browser will be used
In the 1.4 beta, it now supports more than just UTC:
Timezone to be used for formatting. It understands UTC/GMT and the
continental US time zone abbreviations, but for general use, use a
time zone offset, for example, '+0430' (4 hours, 30 minutes east of
the Greenwich meridian) If not specified, the timezone of the browser
will be used.
You could specify the timezone or the offset to use:
{{ myDate | date: 'medium' | timezone: '+0430'}}

Please try this one. I tried several option but at last the following code gave the result that I want.
{{ date_expression | date: 'MM/dd/yyyy': '+0900'}}

Related

angularjs Date Daylightsaving issue

I am using date to display my date on html like:
{{updateDate| date: 'dd/MM/yyyy HH:mm:ss'}}
Dates are all saved in UTC. The problem is it displays the date in locale timezone but not considering Daylight saving on/off. As in for BST it always shows +1 hr from UTC.
I want it to also consider DST(daylight saving time).
Any help, please.
{{ date_expression | date : format : timezone}}
As per angular date filter documentation:
date: Here date can be Date Object, milliseconds or ISO 8601 datetime string formats (like: e.g. yyyy-MM-ddTHH:mm:ss.sssZ). Here Z is 4 digit (+sign) representation of the timezone offset (-1200-+1200). If no timezone is specified in the string input, the time is considered to be in the local timezone.
format: this is optional, If not specified, mediumDate(equivalent to 'MMM d, y' for en_US locale (e.g. Sep 3, 2010)) is used.
timezone: Timezone to be used for formatting. It understands UTC/GMT and the continental US time zone abbreviations, but for general use, use a time zone offset, for example, '+0430' (4 hours, 30 minutes east of the Greenwich meridian) If not specified, the timezone of the browser will be used.
This may help you.

Timezone offset not working in angular js date expression

I have 2016-10-21T13:47:02.922452 as ISO string from backend server.
My timezone is +0530 GMT i.e Offset is +530 (ahead of GMT).
When i use angular date expression like this
{{'2016-10-21T13:47:02.922452'| date:'medium':'+530'}}
I expected output to be = Oct 21, 2016 7:17:02 PM
but it prints
Oct 21, 2016 1:47:02 PM instead.
I am confused for what am i doing wrong here.
Do something like this
var d = new Date('2016-10-21T13:47:02.922452');
console.log(d)
Answering myself !
The easiest way that i figured out ! Make a custom filter
app.filter('IST', function($filter){
return function(val){
var date = new Date(val);
return $filter(date, 'medium');
}
})
Then use filter in expression like this -
{{'2016-10-21T13:47:02.922452'| IST}}
Custom filter will automatically convert ISO format string to Date object (browser timezone will automatically take care of timezone conversion.)
Date pipe transforms the date string you are passing ('2016-10-21T13:47:02.922452') to a Date object and then applies the time zone offset.
¿Whats the problem? When transforming '2016-10-21T13:47:02.922452' to a Date, it supposes that the date is in your local time, so the final calculation is wrong. For example, I am in +0200 so the transformation will be:
2016-10-21T13:47:02.922452 -> 2016-10-21T13:47:02.922452+0200 (Date object)
2016-10-21T13:47:02.922452+0200 -> 2016-10-21T18:17:02.922452+0530 (date changes with offset difference 0530-0200)
If your backend date is always in GMT timezone, just add Z to your date string: 2016-10-21T13:47:02.922452Z. This way, when creating the Date it will understand that the initial timezone is +0000
Solution:
{{'2016-10-21T13:47:02.922452Z' | date:'medium':'+0530'}}

Why timezone in angular doesn't work as expected in the following case

I'm using legacy AngularJS 1.3
I have the following code
{{ (1475586000*1000) | date:'yyyy-MM-dd' : 'Australia/Lord_Howe'}}
In UTC, 1475586000 is 04 Oct 2016 13:00:00 GMT
Since Australia/Lord_Howe is +11, I expect 2016-10-05 should be printed.
However, 2016-10-04 is printed. May I know why?
From the docs for AngularJS v1.3.19 ...
Timezone to be used for formatting. Right now, only 'UTC' is
supported. If not specified, the timezone of the browser will be used.
Looking at the documentation for the latest 1.5 release ...
Timezone to be used for formatting. It understands UTC/GMT and the
continental US time zone abbreviations, but for general use, use a
time zone offset, for example, '+0430' (4 hours, 30 minutes east of
the Greenwich meridian) If not specified, the timezone of the browser
will be used.
... which gives the clue that you can get closer to what you want by using an offset, although that presumably gives daylight savings issues so it is not the same thing:
{{ (1475586000*1000) | date:'yyyy-MM-dd' : '+11:00'}}

AngularJS datetime format get wrong hour and minute value based on localization

I have datetime value on database as follow
But following angularJS code display wrong hour in View
<i title="Baxıldı {{item.ViewedDate | date: 'dd.MM.yyyy hh:mm:ss Z'}}"></i>
for example:
I think this error depends on localization, in my country is UTC+4, so 4 hours added to current value.
Please help to solve this problem.
You can add timezone as the third argument when you're using the date filter.
{{ date_expression | date : format : timezone}}
Here's an example if the dates in your database in stored in UTC.
<i title="Baxıldı {{item.ViewedDate | date: 'dd.MM.yyyy hh:mm:ss Z': 'utc'}}"></i>
From the docs:
Timezone to be used for formatting. It understands UTC/GMT and the
continental US time zone abbreviations, but for general use, use a
time zone offset, for example, '+0430' (4 hours, 30 minutes east of
the Greenwich meridian) If not specified, the timezone of the browser
will be used.

How can I make AngularJS simply print the date without applying a time zone ?

I return from WEBapi a date like
2013-01-01T00:00:00
And I want
{{msa.StartDate | date:'yyyy-MM'}}
To be
2013-01
But because it wants to take my current time zone in consideration (US eastern) it is
2012-12
Is there a easy way to tell it DO NOT CARE ABOUT TIMEZONES? Or is there some other filter I can run the date through to ignore my time zone?
As it is described in documentation "If no timezone is specified in the string input, the time is considered to be in the local timezone." (http://docs.angularjs.org/api/ng.filter:date). So you can set time zone yourself. For example this will use UTC time zone
{{'2013-01-01T00:00:00' + 'Z' | date:'yyyy-MM-dd HH:mm'}}
Result (I'm on the West Coast and have 8 hours difference with London)
2012-12-31 16:00
As of at least Angular 1.4 you can use the date filter's "timezone" parameter to format the date for a given offset. In this case, to keep the time unchanged, use "UTC".
{{msa.StartDate | date:'yyyy-MM':'UTC'}}

Resources