How to find Date difference using dialog in angularjs

Question

I want to calculate days difference. Click of a button loads a popup containing two inputs for date values. and OK from the dialog gives me days difference back to the page. So far I tried this,

In the controller:

    $scope.myitems = ['01/01/2014','01/01/2014'];

    $scope.openDlg = function () {

        var modalInstance = $modal.open({
            template: '<div><input cx-Date ng-model="myitems.date1"/><input cx-Date ng-model="myitems.date2"/><button ng-click="ok()">OK</button></div>',
            controller: ModalInstCtrl,
            resolve: {
                myitems: function () {
                    return $scope.myitems;
                }
            }
        });

        modalInstance.result.then(function (myitems) {
            $scope.myitems = myitems;
                var dt1 = myitems.date1.split('/'),
                    dt2 = myitems.date2.split('/'),
                    one = new Date(dt1[2], dt1[1], dt1[0]),
                    two = new Date(dt2[2], dt2[1], dt2[0]);

                var millisecondsPerDay = 1000 * 60 * 60 * 24;
                var millisBetween = two.getTime() - one.getTime();
                var days = millisBetween / millisecondsPerDay;

                $scope.diff= Math.floor(days);

        }, function () {
            $log.info('Modal dismissed at: ' + new Date());
        });
    };

    var ModalInstCtrl = function ($scope, $modalInstance, myitems) {

        $scope.myitems = myitems;
        $scope.ok = function () {
            $modalInstance.close($scope.myitems);//.TotalDays; .getTime() - $scope.myitem.date1.getTime());
        };

        $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
        };

    };

Template calling the dialog:

   <div>
       <button class="btn btn-default" ng-click="openDlg()">Calender</button>
       <p>{{ diff}}</p>
   </div>

Answer 1

You should be able to simplify your function a bit. Refer to this SO post: Get difference between 2 dates in javascript?

var _MS_PER_DAY = 1000 * 60 * 60 * 24;

var dt1 = new Date($scope.myitems.date1);
var dt2 = new Date($scope.myitems.date2);

dateDiffInDays(dt1, dt2);

// a and b are javascript Date objects
function dateDiffInDays(a, b) {
  // Discard the time and time-zone information.
  var utc1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
  var utc2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());

  return Math.floor((utc2 - utc1) / _MS_PER_DAY);
}

This is a good solution as it ignores Daylight Savings Time & finds the actual difference in time.

---

Another option: (useful if your string date isn't evaluating properly use new Date()

var _MS_PER_DAY = 1000 * 60 * 60 * 24;

dateDiffInDays('01/02/2014','01/02/2013');

// a and b are assumed to be in the format '01/02/2014'
function dateDiffInDays(a, b) {
    // Discard the time and time-zone information.
    var dt1 = Date.parse(a + ' UTC'); //appending 'UTC' within Date.parse() will return the # of MS in UTC
    var dt2 = Date.parse(b + ' UTC');

    return Math.floor((dt2 - dt1) / _MS_PER_DAY); // return -365
}