Javascript HTML中的AngularJS日期差异

我要求用户提供2个日期，例如入住和退房日期

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

假设日期的格式为mm/dd/yyyy

在此之后，我应该动态计算两个日期之间的差异并显示它

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

不知道如何在不移动到控制器的情况下动态计算不同日期之间的差异

---

我应该使用value={{calculatedifferencehere}}

为什么不移动到控制器

<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>

---

如果您在其中创建一些过滤器，您将发现差异

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;
    };
}]);

在内部，我在上面的回答中使用了moment.js，或者

您可以使用一些现成的库，如

以毫秒为单位获取两个日期之间的差异。参数为 日期、单位和使用精度。日期默认为当前日期。例如：

---

在我看来，实现这一目标的最佳途径是创造

然后，您可以通过以下方式在html中的任何位置使用它：

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

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

---

移动到控制器将帮助您执行更多逻辑和条件。请检查以下答案。由于日期将采用mm/dd/yyyy格式，因此我已将字符串转换为日期

  <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>

---

可能的副本可能在几天、几个月或几年内对您有所帮助？2016年8月31日至2016年8月25日之间的唯一差异=差异为6

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

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

  <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>