HTML中的AngularJS日期差异

Question

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

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

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

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

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

（不确定如何在不移动到控制器的情况下动态计算日期之间的差异）

我应该使用 value= {{calculate difference here}}

来显示

Answer 1

为什么不移动到控制器？

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

Answer 2

如果你在哪里创建一些过滤器，你会发现差异。

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 或

你可以使用一些现成的库，比如 angular-moment

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

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

Answer 3

在我看来，实现这一目标的最佳方法是创建 filter

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

然后你就可以用这种方式在html中的任何地方使用它了：

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

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

Answer 4

移至控制器将帮助您执行更多逻辑和条件。请检查以下答案。由于日期将采用 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>