UTC dates handling in AngularJS applications

Almost every developer sooner or later is facing issues with dates. It may be formatting, timezones, etc. I would like to describe few tips about dates handling in AngularJS applications.

Using date filter

If you know, that some model field is native date object you can tell Angular to display it as date in UTC timezone. This is important, because in Javascript native dates are always in user’s local timezone. This is usually helpful when we need to display dates received from REST services, which most often are in UTC.

{{ ::model.someDate | date : 'dd/MM/yyyy' : 'UTC'}}

Using ngModelOptions

Using ngModelOptions is very helpful when you need to create input and allow users to set some date. The issue here is that when user enters date for the first time, everything is fine. But after storing it in backend, and receiving it back as date in UTC, you can have issues with differences between dates. In order to fix that Angular (from 1.3.0) has ng-model-options directive.

 <input
	id="someDate"
	name="someDate"
	type="date"
	ng-model="someDate"                            
	ng-model-options="{timezone: 'UTC'}">

Creating new date in UTC

New Date object created by new Date() will be in local timezone. If you want to create Date object in UTC timezone, you can use following service (it requires moment.js):

'use strict';

angular.module('dates').service('UtcDate', [
  function() {
    var UtcDate = function() {

    };

    UtcDate.prototype.getCurrentMomentUTC = function() {
      var date = new Date();
      return moment.utc(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
    };

    return new UtcDate();
  }
]);