Compare two dates angularjs

Question

I have two dates to be compared in the following format the response coming from backend service has following date format

alignFillDate - 2015-06-09 pickUpDate - 20

Answer 1

Other way -- doing "from scratch": (Example in AngularJS). The method isAfterDate(), specifically, returns true if the first date is greater than second date. Below, date_angular.js:

    var DateModule = angular.module("dates", []);
    DateModule.controller("dates", function($scope){

    $scope.filtros = {};
    $scope.filtros.data_first = null;
    $scope.filtros.data_second = null;

      $scope.isAfterDate = function(){
        data_first_day = $scope.filtros.data_first.split("/")[0];
        data_first_month = $scope.filtros.data_first.split("/")[1];
        data_first_year = $scope.filtros.data_first.split("/")[2];

        data_second_day = $scope.filtros.data_second.split("/")[0];
        data_second_month = $scope.filtros.data_second.split("/")[1];
        data_second_year = $scope.filtros.data_second.split("/")[2];

      if(data_first_year > data_second_year){
        return true;
      }else if (data_first_year == data_second_year){
          if((data_first_month > data_second_month)){
            return true;
          }else if ((data_first_month < data_second_month)) {
            return false;
          }else{
            if(data_first_day == data_second_day){
              return false;
            }else if (data_first_day > data_second_day){
              return true;
            }else{
              return false;
            }
          }
      }else{
        return false;
      }
    }

     $scope.submit = function() {
        if (this.isAfterDate()){
          alert("The first date is grater than the second date");
        }else{
          $("#form_date").submit();
        }
      }

    });

        RelatoriosModule.directive("datepicker", function () {
          return {
          restrict: "A",
          require: "ngModel",
          link: function (scope, elem, attrs, ngModelCtrl) {
          var updateModel = function (dateText) {
            scope.$apply(function () {
              ngModelCtrl.$setViewValue(dateText);
            });
          };
          var options = {
            dateFormat: "dd/mm/yy",
            onSelect: function (dateText) {
              updateModel(dateText);
            }
          };
          elem.datepicker(options);
        }
      }
    });

For other comparisons: only adjust the method.

In the form (form.html), if you are using AngularJS, you can add it in your archive. Below, form.html:

<div ng-app="dates" class="section-one">
  <div ng-controller="dates" class="section">
    <form method="get" action="dates/dates" id="form_date">
    <div class="form-container--linha">
      <div class="field-3">
        <label for="data_first">first date: </label>
        <input id="data_first" type="text" name="data_first" ng-model="filtros.data_first" datepicker/>
      </div>
      <div class="field-3">
        <label for="data_second">second date: </label>
        <input id="data_second" type="text" name="data_second" ng-model="filtros.data_second" datepicker/>
      </div>
    </div>
    <div class="actions">
     <button class="bt-principal" type="button" ng-click="submit()">submit</button>
   </div>
  <form>
</div>
</div>

Answer 2

You save those date strings as Date objects, do a comparison with vanilla javascript and assign to scope or this.

   var alignFillDate = new Date("2015-06-09");
  var pickUpDate = new Date("2015-05-10");


  if (pickUpDate < alignFillDate) {
    alignFillDate = alignFillDate.setDate(alignFillDate.getDate() + 30);
  }

  $scope.pickUpDate = pickUpDate;
  $scope.alignFillDate = alignFillDate;

Here is a plunk that does what you are trying to do http://plnkr.co/edit/Kq7WA1cBcrwDyxDeBFAL?p=info.

Answer 3

You should use an angular filter to achieve this. The filter takes in the object containing both dates, and will return the formatted date.

Here is a filter that performs this operation:

myApp.filter('customDate', function($filter) {
  var DATE_FORMAT = 'yyyy-MM-dd';

  return function (input) {
    var alignFillDate = new Date(input.alignFillDate);   
    var pickUpDate = new Date(input.pickUpDate);
    if ( alignFillDate > pickUpDate) {
        alignFillDate.setDate(alignFillDate.getDate() + 30)
        alignFillDate = $filter('date')(alignFillDate, DATE_FORMAT);
        return alignFillDate + ' this date has been changed';
    } else {
        return $filter('date')(alignFillDate, DATE_FORMAT);   
    }
  }
});

Here is a working jsFiddle: http://jsfiddle.net/ADukg/6681/