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

If you have a lot of date logic to perform, checkout moment.js - makes working with dates in JS a boat load easier. — tymeJV
– tymeJV, Commented Jun 1, 2015 at 15:25
Consider what @tymeJV said and also check angular-moment: github.com/urish/angular-moment — pgrodrigues
– pgrodrigues, Commented Jun 1, 2015 at 15:27
So you increment alignFillDate by 30 days when it greater than pickUpDate. What is shown in the view when this occurs? — soote
– soote, Commented Jun 1, 2015 at 15:28
we would show, the incremented new date, and text saying that date has been changed. how do i code this — nikitha
– nikitha, Commented Jun 1, 2015 at 15:29

Ronald91 · Accepted Answer · 2015-06-01 15:51:49Z

9

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.

answered Jun 1, 2015 at 15:51

Ronald91

1,7861 gold badge15 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

nikitha Over a year ago

this looks working, and should i add a new scope variable for showing text on view?

Ronald91 Over a year ago

Yes, for that you can get into ng-show and hide to only display this text once this scenario happens.

nikitha Over a year ago

can we do the comparsion on html to show the text, instead of controller like - (alignFillDate | date) > (pickUpDate | date)? instead of having a scope variable in controller?

Gi1ber7 Over a year ago

This solution doesn't hold for values that are equals. Thus the solution is not reliable.

soote · Accepted Answer · 2015-06-01 15:53:12Z

4

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/

edited Jun 1, 2015 at 15:53

answered Jun 1, 2015 at 15:37

soote

3,2801 gold badge25 silver badges36 bronze badges

3 Comments

nikitha Over a year ago

can we do the comparsion on html to show the text, instead of controller like - ng-if="(alignFillDate | date) > (pickUpDate | date)"? instead of having a scope variable in controller?

soote Over a year ago

Look at my jsfiddle. No logic resides in the controller or template. You will need to have a variable on the scope to store the object, since that is the point of controllers (to bind data to scope).

nikitha Over a year ago

yes right, but i want to compare this dates on html , and show and hide text depending on if the condition is met or not . how can i achieve this?

Luiz Calaça · Accepted Answer · 2016-10-14 13:45:17Z

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>

Collectives™ on Stack Overflow

Compare two dates angularjs

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related