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\'}}

A

Answer 1

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' }}

Answer 2

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);

       };
    });

Answer 3

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')

Answer 4

You have also the possibility to write a custom filter for your date, that display it in UTC format. Note that I used toUTCString().

var app = angular.module('myApp', []);

app.controller('dateCtrl', function($scope) {
    $scope.today = new Date();
});
    
app.filter('utcDate', function() {
    return function(input) {
       return input.toUTCString();
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  
<div ng-app="myApp" ng-controller="dateCtrl">      
    Today is {{today | utcDate}}       
</div>

Answer 5

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

Answer 6

If you are working in .Net then adding following in web.config inside

<system.web>

will solve your issue:

<globalization culture="auto:en-US" uiCulture="auto:en-US" />