ng-if date comparison not year in angularjs

Question

I have 2 dates one is first day of month and other is from database (in json object) when compare in ng-if its ignoring year. It comparing date and month only

Here is my code

  <tr ng-repeat="c in listBCust | orderBy : orderByField | filter : srchInv" ng-class="{'holdCust':'01/09/2015'>(c.startDate.slice(6,-2) | date:'dd/MM/yyyy')}">

    <td>  
       <div ng-if="'01/09/2015'>(c.startDate.slice(6,-2) | date:'dd/MM/yyyy')" style="background-color:#E25D5D">{{c.startDate.slice(6,-2) | date:'dd/MM/yyyy'}}</div>

       <div ng-if="'01/09/2015'<(c.startDate.slice(6,-2) | date:'dd/MM/yyyy')" style="background-color:#E25D5D">{{c.startDate.slice(6,-2) | date:'dd/MM/yyyy'}}</div>
       <div>{{MfstDate}}</div>
    </td>

  </tr>

Answer 1

You can just change date format to yyyy/MM/dd and all seems work

// Code goes here

angular.module("app",[]).controller('ctrl',function($scope){
  $scope.startDate = '/Date(1441045800000)/';
  $scope.mfstDate = new Date(2015,8,1);
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
    <h1>Hello Plunker!</h1>
    {{startDate.slice(6,-2) | date:'dd/MM/yyyy'}}
    <div ng-if="(mfstDate| date:'yyyy/MM/dd')>(startDate.slice(6,-2) | date:'yyyy/MM/dd')" style="background-color:#E25D5D">{{startDate.slice(6,-2) | date:'dd/MM/yyyy'}} less {{mfstDate| date:'dd/MM/yyyy'}}</div>
    <div ng-if="(mfstDate| date:'yyyy/MM/dd')<(startDate.slice(6,-2) | date:'yyyy/MM/dd')" style="background-color:#E25D5D">{{startDate.slice(6,-2) | date:'dd/MM/yyyy'}} greater {{mfstDate| date:'dd/MM/yyyy'}}</div>
  </div>

UPDATE i think you need a bit fix your getFirst_Last_DateOfMonth function, you not need manually format string, because angular have a good filter date that you already yse inside view.

So you can return just date instead string,

function getFirst_Last_DateOfMonth(F_L) {
    //here F=First Date of Current month
    //     L=Last Date of Current Month

    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth();

    var yyyy = today.getFullYear();

    var firstLastDay = F_L == 'F'? new Date(yyyy,mm,1) : new Date(yyyy, mm + 1, 0);
    return firstLastDay; //return Date object and in view use date filter when need comaring
    //return $filter('date')(firstLastDay,'yyyy/MM/dd'); //uncomment if want return formatted string
}

See snippet below

// Code goes here

angular.module("app", []).controller('ctrl', function($scope, $filter) {
  function getFirst_Last_DateOfMonth(F_L, formatString) {
    //here F=First Date of Current month
    //     L=Last Date of Current Month

    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth();

    var yyyy = today.getFullYear();

    var firstLastDay = F_L == 'F' ? new Date(yyyy, mm, 1) : new Date(yyyy, mm + 1, 0);
    return !formatString ? firstLastDay //return Date object and in view use date filter when need comaring
      : $filter('date')(firstLastDay, 'yyyy/MM/dd'); //uncomment if want return formatted string
  }

  $scope.startDate = '/Date(1441045800000)/';
  $scope.mfstDate = getFirst_Last_DateOfMonth('F');

  $scope.mfstDateString = getFirst_Last_DateOfMonth('F', true);
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <h1>Hello Plunker!</h1>
  {{startDate.slice(6,-2) | date:'dd/MM/yyyy'}}
  <div>
    mfstDate is date!
    <div ng-if="(mfstDate| date:'yyyy/MM/dd')>(startDate.slice(6,-2) | date:'yyyy/MM/dd')" style="background-color:#E25D5D">{{startDate.slice(6,-2) | date:'dd/MM/yyyy'}} less {{mfstDate| date:'dd/MM/yyyy'}}</div>
    <div ng-if="(mfstDate| date:'yyyy/MM/dd')<(startDate.slice(6,-2) | date:'yyyy/MM/dd')" style="background-color:#E25D5D">{{startDate.slice(6,-2) | date:'dd/MM/yyyy'}} greater {{mfstDate| date:'dd/MM/yyyy'}}</div>
  </div>
  <div>
    mfstDate is formatted string!
    <div ng-if="mfstDateString>(startDate.slice(6,-2) | date:'yyyy/MM/dd')" style="background-color:#E25D5D">{{startDate.slice(6,-2) | date:'dd/MM/yyyy'}} less {{mfstDateString}}</div>
    <div ng-if="mfstDateString<(startDate.slice(6,-2) | date:'yyyy/MM/dd')" style="background-color:#B8BCEF">{{startDate.slice(6,-2) | date:'dd/MM/yyyy'}} greater {{mfstDateString}}</div>
  </div>
</div>

Answer 2

I would suggest to make the comparison of dates in a function in your controller, and call the function in your ng-if. And in order to compare dates correctly, you should use the Date object.

So it would look something like this:

<div ng-if="compareDates(date1, date2)">*content*</div>

While the function doing something like this:

function compareDates(date1, date2) {
   var dateObj1 = new Date(date1);
   var dateObj2 = new Date(date2);

   return (dateObj1 > dateObj2);
}