javascript - 将原生 JS 转换为 Angularjs 以计算两个日期之间的天数？

Question

我在尝试转换或翻译 native js 脚本以计算两个范围(“work_start”和“work_end”)的两个日期之间的天数时遇到问题，但没有取得任何成功。

这是代码，实际上它可以工作，但是在 console.log 中触发了一个警报，而我无法解决这个问题。

$scope.$watchGroup(['work_start', 'work_end'], function() {
var date1 = $scope.work_start;
var date2 = $scope.work_end;

// First we split the values to arrays date1[0] is the year, [1] the month and [2] the day
date1 = date1.split('-');
date2 = date2.split('-');

// Now we convert the array to a Date object, which has several helpful methods
date1 = new Date(date1[0], date1[1], date1[2]);
date2 = new Date(date2[0], date2[1], date2[2]);

// We use the getTime() method and get the unixtime (in milliseconds, but we want seconds, therefore we divide it through 1000)
date1_unixtime = parseInt(date1.getTime() / 1000);
date2_unixtime = parseInt(date2.getTime() / 1000);

// This is the calculated difference in seconds
var timeDifference = date2_unixtime - date1_unixtime;

// in Hours
var timeDifferenceInHours = timeDifference / 60 / 60;

// and finaly, in days :)
var timeDifferenceInDays = timeDifferenceInHours  / 24;

// alert(timeDifferenceInDays);
$scope.total_days = timeDifferenceInDays;

});

这是我收到的警报:

angular.js:13283 TypeError: Cannot read property 'split' of null
at app.js:3997
at c (angular.js:16419)
at m.$eval (angular.js:16884)
at m.$digest (angular.js:16700)
at m.$apply (angular.js:16992)
at g (angular.js:11313)
at y (angular.js:11511)
at XMLHttpRequest.t.onload (angular.js:11452)(anonymous function) @ angular.js:13283(anonymous function) @ angular.js:9996m.$digest @ angular.js:16702m.$apply @ angular.js:16992g @ angular.js:11313y @ angular.js:11511t.onload @ angular.js:11452 

我改变了一些东西，但这是我能做到的。欢迎任何帮助

Answer 1

Cannot read property 'split' of null

这意味着您正在尝试使用 split函数作用于非字符串的东西。那么你在哪里使用 split 函数呢？

date1 = date1.split('-');
date2 = date2.split('-');

那么 date1/2 是在哪里定义的呢？

var date1 = $scope.work_start;
var date2 = $scope.work_end;

那么$scope.work_start/end在哪里定义的？不确定，但可能是 html 格式。要简单地解决此问题，请执行以下操作:

if(date1 === null || date2 === null){
  alert("no dates given")
} else {
  date1 = date1.split('-');
  date2 = date2.split('-');
  ... // rest of your code
}

<小时/> 根据下面的讨论更新本节...

Dates在 JS 中可能会很痛苦。新初始化的日期对象只是自 1970 年 1 月 1 日 (UTC) 以来的毫秒数。如果您要使用日期和时间，请研究一个 js 库，它使日期更易于使用，例如 Moment或Sugar .

$watchGroup监视这两个日期并在其中任何一个发生变化时运行“天数间隔”功能。这很好，但是您必须弥补一系列问题，例如

the user changes work_start before work_end, and work_start is after work_end

the user enters a date that is not in the correct format

还有很多其他可能出现的东西。您可能需要考虑合并一个按钮，以允许用户在完成编辑后更新日期。这还允许您的表单对输入进行错误检查，如果格式不正确则不允许提交。

HTML

<div ng-controller="workCont">
  <input ng-model="$scope.work_start"></input>
  <input ng-model="$scope.work_end"></input>
  <button ng-click="$scope.getDaysBetween()">Get Days Between</button>
  <p>Days Between: {{$scope.daysBetween}}</p>
</div>

JS

var workApp = angular.module('workApp', []);

workApp.controller('workCont', function workCont($scope) {
  $scope.work_start = new Date();
  $scope.work_end = new Date();
  $scope.daysBetween = 0;
  $scope.getDaysBetween = function(){
    var date1 = $scope.work_start
    var date2 = $scope.work_end
    var timeDiff = Math.abs(date2.getTime() - date1.getTime());
    var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)); 
    $scope.daysBetween = diffDays
  }
});

感谢“Get difference between 2 dates in javascript? ”的 getDaysBetween 逻辑。