AngularJS: RangeError: Invalid time value at Date.toISOString (<anonymous>)

Question

In my project, i have to show in the jquery (angular-jquery-datepicker) date picker, the date formatted in the correct way for the user in his/her zone. I'm able to show in USA and EU format. When the user set those dates i have to save it with the toISOString to the database. However, for the USA no problem at all works fine. For the EU formatting, I'm receiving the error posted in the title and i'm sharing the entire error:

RangeError: Invalid time value
at Date.toISOString (<anonymous>)
at n.$scope.save (scripts.js:2826)
at angular.js:12474
at f (angular.js:21700)
at n.$eval (angular.js:14570)
at n.$apply (angular.js:14669)
at HTMLButtonElement.<anonymous> (angular.js:21705)
at HTMLButtonElement.dispatch (jquery.min.js:3)
at HTMLButtonElement.r.handle (jquery.min.js:3)

I have no idea why for USA date is working and for EU is not. I cannot understand why for one date is working but not for the other one.

Below i'm sharing the piece of code which gives that error:

 $scope.save = function() {
  if ($scope.banner.fromText != null && $scope.banner.toText != null) {
            $scope.banner.from = new Date($scope.banner.fromText);
            $scope.banner.to = new Date($scope.banner.toText);
            $scope.banner.to.setHours(23, 59, 59)
            $scope.banner.from = $scope.banner.from.toISOString()
            $scope.banner.to = $scope.banner.to.toISOString()
 }else{
  $scope.banner.to = null
  $scope.banner.from = null
 }

I'm using in the code $filter('date')(value.item.from, 'shortDate');

However, if you need to see something extra for understanding this error please let me know what i should post to have a better look on it

My date picker directive:

'use strict';
angular.module('angular-jquery-datepicker', []).factory('datepicker', 
[function() {
return $.datepicker;
}]).provider('$datepicker', function() {
return {
    setDefaults: function(language) {
        $.datepicker.setDefaults($.datepicker.regional[language]);
    },
    $get: function() {
        return {

        }
    }
}
}).directive('jqdatepicker', function() {
return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attr, ctrl) {
        element.datepicker({
            //dateFormat: 'dd-mm-yy',
            autoclose: true,
            changeMonth: true,
            changeYear: true,
            maxDate: Date.today(),
            showOn: "both",
            buttonImage: "/img/calendar-o.png",
            onSelect: function(date) {
                ctrl.$setViewValue(date);
                ctrl.$render();
                scope.$apply();
            }
        });
    }
};

/*Datepicker for banner - extended main datepicker*/
}).directive('jqdatepickerbanner', function() {
return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attr, ctrl) {

        //scope.customStartDate = today;
        element.datepicker({
            //dateFormat: 'dd-mm-yy',
            changeMonth: true,
            changeYear: true,
            //maxDate: '+6mm', // 6 Months max date --> For set the maximum period the Banner can be set up
            minDate: Date.today(),
            showOn: "both",
            buttonImage: "/img/calendar-o.png",
            onSelect: function(date) {
                if (this.id === "startDateBanner") {
                    $("#endDateBanner").datepicker("option", "minDate", date);
                }
                ctrl.$setViewValue(date);
                ctrl.$render();
                scope.$apply();
            }
        });
    }
};
});

Solution

As it turns out, this occurs when invoking toISOString on an Invalid Date. This can happen because your input to the new Date() construction is undefined -- OR -- because perhaps you are manipulating the UTC-Offset into an Invalid Date.

Here's a little snippet to convey the exact error in as few lines possible:

clear();
;(function iif() {
    var d = new Date(undefined);  // .valueOf() === 'Invalid Date'
    console.log('>', d, +d);
    if (isNaN(+d)) return;
    d.toISOString();
    console.log('- executed -');
})();

Throw that into your JS Console and play around with it -- you'll reproduce that error anytime you invoke toISOString on new Date(undefined). if (isNaN(+d)) return; means, "if the UTC timestamp is Not a Number, just abort mission" -- +new Date() is the same as (new Date()).valueOf().

One point of leverage for you: ensure your falsey dates are either null or 0 -- not undefined or "" (empty string).

Hope this helps!