CODEWITHSUNDEEP
javascriptangularjsdatemomentjs
Toto NaBendo
Toto NaBendo

Reputation: 342

MomentJs Invalid Date after add some days

I'm implementing a date component with angularJS and momentJs , I would like to increment the day of a date following a counter. When i want to add like 40 days it's working, but after passing the 29/04/2019 the date has been transformed in "Invalid Date".

It look like the config make this error. If you remove it, it works. But I need this config i can't remove it.

Here you can find the snippet code :

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

Upvotes: 0

Views: 49

Answers (1)

P&#228;rt Johanson
P&#228;rt Johanson

Reputation: 1650

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

I think you had a typo on the line

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

It should have been:

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

Upvotes: 2

Related Questions