Question

我正在使用angularJS和momentJs实现日期组件，我想增加一个计数器后面的日期的日期。当我想添加40天时，它可以正常工作，但是在通过29/04/2019之后，日期已转换为“无效日期”。

看起来像配置文件会出现此错误。如果将其删除，它将起作用。但是我需要这个配置，我无法将其删除。

在这里您可以找到代码段：

// Code goes here

var app = angular.module('App', ['ngMaterial', 'ngMessages', 'ngAnimate']);
app.controller('MainCtrl', ['$rootScope', '$scope',
  function($rootScope, $scope) {

    $scope.DateValide = new Date();
    $scope.Validite = 10;
    $scope.minDate = new Date();


    $scope.DateValideChange = function() {
      $scope.Validite = dateDiff(new Date(), $scope.DateValide);
    };

    $scope.ValiditeChange = function() {
      if ($scope.Validite) {
        console.log("Old : " + $scope.DateValide);
        $scope.DateValide = new Date(moment($scope.Validite, "dd-mm-yyyy").add($scope.Validite, "days"));
        console.log("New : " + $scope.DateValide);
      }
    };

    function dateDiff(dateold, datenew) {
      var oneDay = 24 * 60 * 60 * 1000;
      return Math.round(Math.abs((dateold.getTime() - datenew.getTime()) / (oneDay)));
    }


  }
]);

app.config(function($mdDateLocaleProvider) {
  $mdDateLocaleProvider.formatDate = function(date) {
    return date ? moment(date).format("DD-MM-YYYY") : "";
  };

  $mdDateLocaleProvider.parseDate = function(dateString) {
    var m = moment(dateString, 'DD-MM-YYYY', true);
    return m.isValid() ? m.toDate() : new Date(NaN);
  };
});

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.12/angular-material.min.css" />
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-animate.min.js"></script>
  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-messages.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.12/angular-material.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="App">
  <div ng-controller="MainCtrl" class="col-sm">
    <md-input-container>
      <label>Date de validite</label>
      <md-datepicker ng-model="DateValide" ng-change="DateValideChange()"></md-datepicker>
    </md-input-container>
    <md-input-container class="col-2">
      <label>Validite</label>
      <input type="number" ng-model="Validite" ng-change="ValiditeChange()" />
    </md-input-container>
  </div>
</body>

</html>

Answer 1

// Code goes here

var app = angular.module('App', ['ngMaterial', 'ngMessages', 'ngAnimate']);
app.controller('MainCtrl', ['$rootScope', '$scope',
  function($rootScope, $scope) {

    $scope.DateValide = new Date();
    $scope.Validite = 10;
    $scope.minDate = new Date();


    $scope.DateValideChange = function() {
      $scope.Validite = dateDiff(new Date(), $scope.DateValide);
    };

    $scope.ValiditeChange = function() {
      if ($scope.Validite) {
        console.log("Old : " + $scope.DateValide);
        $scope.DateValide = new Date(moment($scope.minDate, "dd-mm-yyyy").add($scope.Validite, "days"));
        console.log("New : " + $scope.DateValide);
      }
    };

    function dateDiff(dateold, datenew) {
      var oneDay = 24 * 60 * 60 * 1000;
      return Math.round(Math.abs((dateold.getTime() - datenew.getTime()) / (oneDay)));
    }


  }
]);

app.config(function($mdDateLocaleProvider) {
  $mdDateLocaleProvider.formatDate = function(date) {
    return date ? moment(date).format("DD-MM-YYYY") : "";
  };

  $mdDateLocaleProvider.parseDate = function(dateString) {
    var m = moment(dateString, 'DD-MM-YYYY', true);
    return m.isValid() ? m.toDate() : new Date(NaN);
  };
});

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.12/angular-material.min.css" />
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-animate.min.js"></script>
  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-messages.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.12/angular-material.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="App">
  <div ng-controller="MainCtrl" class="col-sm">
    <md-input-container>
      <label>Date de validite</label>
      <md-datepicker ng-model="DateValide" ng-change="DateValideChange()"></md-datepicker>
    </md-input-container>
    <md-input-container class="col-2">
      <label>Validite</label>
      <input type="number" ng-model="Validite" ng-change="ValiditeChange()" />
    </md-input-container>
  </div>
</body>

</html>

我想你的电话打错了

$scope.DateValide = new Date(moment($scope.Validite, "dd-mm-yyyy").add($scope.Validite, "days"));

应该是：

$scope.DateValide = new Date(moment($scope.minDate, "dd-mm-yyyy").add($scope.Validite, "days"));

添加几天后，MomentJs无效日期

1 个答案: