CODEWITHSUNDEEP
javascriptangularjs
nikitha
nikitha

Reputation: 179

Compare two dates angularjs

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 - 2015-05-10

so, front end needs to check the condition is if pickUpDate is less then the alignFillDate, we will increase the alignFillDate by 30 days, i.e, we increment the pickUpDate to next month(30 days from now ) and show different text on view

How, do i achieve this using angular and javascript. ? how does my html and controller needs to changed for this date calculation

Upvotes: 5

Views: 82724

Answers (3)

Luiz Calaça
Luiz Calaça

Reputation: 71

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>

Upvotes: 0

soote
soote

Reputation: 3260

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/

Upvotes: 4

Ronald91
Ronald91

Reputation: 1776

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.

Upvotes: 9

Related Questions