Using AngularJS date filter with UTC date

Question

I have an UTC date in milliseconds which I am passing to Angular s date filter for human formatting     someDate   date  d MMMM yyyy      Awesome  except someDate is in UTC and the date filter considers it to be in local time   How can I tell Angular that someDate is UTC   Thank you

User · Accepted Answer

Similar Question here   I ll repost my response and propose a merge   Output UTC seems to be the subject of some confusion -- people seem to gravitate toward moment js     Borrowing from this answer  you could do something like this  i e  use a convert function that creates the date with the UTC constructor  without moment js   controller  var app1   angular module  app1        app1 controller  ctrl     scope  function  scope      var toUTCDate   function date       var  utc   new Date date getUTCFullYear    date getUTCMonth    date getUTCDate     date getUTCHours    date getUTCMinutes    date getUTCSeconds         return  utc          var millisToUTCDate   function millis       return toUTCDate new Date millis               scope toUTCDate   toUTCDate       scope millisToUTCDate   millisToUTCDate            template   lt html ng-app  app1  gt      lt head gt       lt script data-require  angular js    data-semver  1 2 12  src  http   code angularjs org 1 2 12 angular js  gt  lt  script gt       lt link rel  stylesheet  href  style css    gt       lt script src  script js  gt  lt  script gt     lt  head gt      lt body gt       lt div ng-controller  ctrl  gt         lt div gt        utc   millisToUTCDate 1400167800    date  dd-M-yyyy H mm           lt  div gt         lt div gt        local   1400167800   date  dd-M-yyyy H mm           lt  div gt       lt  div gt     lt  body gt    lt  html gt    here s plunker to play with it   See also this and this   Also note that with this method  if you use the  Z  from Angular s date filter  it seems it will still print your local timezone offset

User · Answer

You have also the possibility to write a custom filter for your date  that display it in UTC format  Note that I used toUTCString      x000D   x000D  var app   angular module  myApp        x000D   x000D  app controller  dateCtrl   function  scope    x000D       scope today   new Date    x000D      x000D       x000D  app filter  utcDate   function     x000D      return function input    x000D         return input toUTCString    x000D         x000D      x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 4 8 angular min js  gt  lt  script gt    x000D     x000D   lt div ng-app  myApp  ng-controller  dateCtrl  gt        x000D      Today is   today   utcDate          x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Here is a filter that will take a date string OR javascript Date   object  It uses Moment js and can apply any Moment js transform function  such as the popular  fromNow   angular module  myModule   filter  moment   function        return function  input  momentFn     param1  param2     param n           var args   Array prototype slice call arguments  2           momentObj   moment input       return momentObj momentFn  apply momentObj  args              So        anyDateObjectOrString   moment   format    MMM DD  YYYY       would display Nov 11  2014     anyDateObjectOrString   moment   fromNow       would display 10 minutes ago  If you need to call multiple moment functions  you can chain them  This converts to UTC and then formats        someDate   moment   utc    moment   format    MMM DD  YYYY

User · Answer

If you are working in  Net then adding following in web config inside     lt system web gt    will solve your issue     lt globalization culture  auto en-US  uiCulture  auto en-US    gt

User · Answer

An evolved version of ossek solution   Custom filter is more appropriate  then you can use it anywhere in the project  js file  var myApp   angular module  myApp        myApp filter  utcdate      filter    locale   function  filter   locale        return function  input  format            if   angular isDefined format                 format    locale  DATETIME FORMATS    medium                       var date   new Date input           var d   new Date           var  utc   new Date date getUTCFullYear    date getUTCMonth    date getUTCDate     date getUTCHours    date getUTCMinutes    date getUTCSeconds             return  filter  date    utc  format                  in template   lt p gt This will convert UTC time to local time lt p gt   lt span gt   dateTimeInUTC   utcdate   MMM d  y h mm ss a    lt  span gt

User · Answer

Seems like AngularJS folks are working on it in version 1 3 0  All you need to do is adding    UTC  after the format string  Something like     someDate   date  d MMMM yyyy     UTC      As you can see in the docs  you can also play with it here  Plunker example  BTW  I think there is a bug with the Z parameter  since it still show local timezone even with  UTC

User · Answer

There is a bug filed against this in angular js repo https   github com angular angular js issues 6546 issuecomment-36721868

User · Answer

Could it work declaring the filter the following way      app filter  dateUTC   function   filter            return function  input  format               if   angular isDefined format                    format    dd MM yyyy                            var date   new Date input               return  filter  date   date toISOString   slice 0  23   format

User · Answer

If you do use moment js you would use the moment   utc   function to convert a moment object to UTC  You can also handle a nice format inside the controller instead of the view by using the moment   format   function  For example   moment myDate  utc   format  MM DD YYYY

User · Answer

After some research I was able to find a good solution for converting UTC to local time  have a a look at the fiddle  Hope it help  https   jsfiddle net way2ajay19 2kramzng 20    lt script src  https   ajax googleapis com ajax libs angularjs 1 2 23 angular min js  gt  lt  script gt    lt div ng-app ng-controller  MyCtrl  gt      date   date  yyyy-mm-dd hh mm ss      lt  div gt     lt script gt  function MyCtrl  scope      scope d    2017-07-21 19 47 00      scope d    scope d replace       T      Z      scope date   new Date  scope d      lt  script gt

[angularjs] Using AngularJS date filter with UTC date

Examples related to angularjs

Examples related to datetime

Examples related to angularjs-filter