Date in angularjs are sent in UTC in $resource.$save()

Question

I have an issue with angularjs. I created a factory Event and when I use the $save metho,d the date is send in UTC and not in the browser timezone...

I created a jsfiddle to illustrate it :

http://jsfiddle.net/Wr8mL/

(Click on the save button and open your console to see request params)

My code :

window.App = angular.module('App', ["ngResource"]);

App.factory('Event', ['$resource', '$http', function($resource, $http) {
  Event = $resource('/events/:id.json',
      { id:'@id' },
      { update: {method:'PUT' }, 'query': { method: 'GET', isArray: false }});
  return Event;
}])

App.controller("EventNewCtrl", ['$scope', "$http", "Event", function($scope, $http, Event) {

  $scope.resetEvent = function(){
    $scope.event = new Event({ date: new Date() })
  }

  $scope.save = function() {
      $scope.event.$save();
  }

  $scope.resetEvent()

}]);

Answer 1

Before the data will be submitted, angular transforms your object with the JSON.stringify function. Try a

console.log(JSON.stringify(new Date()));

this is the same as:

console.log(new Date().toISOString());

(for sure the first one will be wrapped in quotation marks)

There are a lot of possibilities to change the default behavior:

1) replace the toISOString function with your own implementation:

  Date.prototype.toISOString = function(){
      return 'here goes my awesome formatting of Date Objects '+ this;
  }; 

2) replace the default transformation of angular with your own. You can do this by providing a transformRequest function (wether per resource configuration or for your complete app by $httpProvider.defaults.transformRequest). See $http service for more information. Your function will look like this:

transformRequest: function(data){
    return your string representation of the data
}

If you are interested why toISODate strips the timezone have a look at the ECMAScript Langauge Specification: http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15