AngularJS date Difference in HTML

Question

I am requesting user to provide 2 dates , for example check-in and check-out date

<input type="date" ng-model="fromDate" />
<input type="date" ng-model="toDate" />

Assuming dates will be in format of mm/dd/yyyy

After this, I should dynamically calculate the difference between 2 dates and display it..

<input type="number" ng-value="">

(not sure how to dynamically calculate different between dates without moving to controller)

I should displaying using value= {{calculate difference here}}

Possible duplicate of [How to calculate date difference in javascript](http://stackoverflow.com/questions/7763327/how-to-calculate-date-difference-in-javascript) — zero298, Aug 11 '16 at 10:21
This may help you http://stackoverflow.com/questions/26649194/calculating-days-difference-with-using-angular-and-jquery-datepicker — Manish Rane, Aug 11 '16 at 10:24
only difference between dates (08/31/2016 - 08/25/2016 = difference is 6) — JavaLearner1, Aug 11 '16 at 10:25

score 0 · Answer 1 · answered Aug 11 '16 at 10:24

Why without moving to controller?

<div ng-app="myApp" ng-controller="myCtrl">
<input type="date" ng-model="fromDate" />
<input type="date" ng-model="toDate" />

<input type="number" ng-value="difference(fromDate, toDate)"> 
</div>

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

app.controller('myCtrl', function($scope) {
   $scope.difference = function (fromDate, toDate) {
        if (fromDate && toDate) {
            return Math.round(Math.abs((new Date(fromDate).getTime() - new Date(toDate).getTime())/(24*60*60*1000)));
        }
   }
});
</script>

score 0 · Answer 2 · answered Aug 11 '16 at 10:30

If you create some filter where, you find out difference.

myApp.filter('dateDiff', ['$filter', function($filter)
{
    return function(endDate,startDate)
    {
        if(endDate == null || startDate === null){ return ""; }
        var start = moment(startDate);
        var end = moment(endDate);
        var dif = end.diff(start,'days');

        return diff;
    };
}]);

Internally I am using moment.js in above answer or

you can use some ready made lib like angular-moment

Get the difference between two dates in milliseconds. Parameters are date, units and usePrecision. Date defaults to current date. Example:

<span>Difference: {{ dateFrom | amDifference : dateTo : 'days' }} days</span>

score 0 · Answer 3 · answered Aug 11 '16 at 10:38

In my opinion the best approach to achieve this is create filter

angular.module('myApp')
    .filter('dateDiff', [function() {
        return function dateDiffFilter(dateTo, dateFrom) {
            //TODO: logic of date diff
            return dateTo - dateFrom;
        };
    }]);

and then you can use it anywhere in html in this way:

<input type="date" ng-model="fromDate" />
<input type="date" ng-model="toDate" />

<input type="number" value="{{ fromDate|dateDiff:toDate}}"> 
</div>

score 0 · Answer 4 · answered Aug 11 '16 at 10:42

Moving to controller will help you to do more logics and condition. Please check the following answer. Since date will be in the mm/dd/yyyy format, I have converted the string to date.

  <div ng-controller="myController">
    <input type="date" ng-model="fromDate" ng-change="calculateDifference(fromDate, toDate)"/>
    <input type="date" ng-model="toDate" ng-change="calculateDifference(fromDate, toDate)"/>

    <input type="number" ng-model="dateDifference.noOfDays"> 
    </div>
    <script>

    app.controller('myController', function($scope) {
$scope.dateDifference={noOfDays:-1};
       $scope.calculateDifference= function (fromDate, toDate) {
            var pattern = /(\d{2})\/(\d{2})\/(\d{4})/; 
            var date1=new Date(fromDate.replace(pattern,'$3-$1-$2'));
           var date2=new Date(toDate.replace(pattern,'$3-$1-$2'))
         $scope.dateDifference.noOfDays=date1-date2;
       }
    });
    </script>

AngularJS date Difference in HTML

4 Answers4