Angularjs using ng-show condition to compare two different date formats

Question

I have a calendar application made in AngularJS that pulls data from three different API endpoints. I'm having issues in using ng-show to compare a range of dates from the data endpoint with Javascript generated dates.

This is the code:

<tr ng-repeat="date in futureDates">
   <td> {$ date | date : 'yyyy-MM-dd' $} </td>
    <td ng-repeat="users in calendar_users track by $index" 
        ng-show="users.fields.team_name == team.pk">
       <span ng-repeat="activities in calendar_activities track by $index" 
             ng-show="activities.fields.user == users.fields.username && 
                      activities.fields.date == date | date 'yyyy-MM-dd'">
             {$activities.fields.activity$}
             {$activities.fields.date | date $}
       </span>
    </td>
</tr>

The first <td> tag lists 30 days of dates, the second <td> tags uses <span> inside to compare values and see if they match up.

For this line of code:

<span ng-repeat="activities in calendar_activities track by $index" 
      ng-show="activities.fields.user == users.fields.username && 
              activities.fields.date == date | date 'yyyy-MM-dd'">

In the ng-show part of the code, the first condition before the && evaluates correctly, but after the && the condition doesn't evaluate correctly.

activities.fields.date has the date format of 2017-03-09 (as an example)

date | date 'yyyy-MM-dd'"> is a list of dates automatically generated by Javascript. The date is in a timestamp format hence why I've attempted to use the following part of the code | date 'yyyy-MM-dd' to make it so that it's formatted as the same date I'm comparing it to.

This is how the calendar looks like

Both conditions are evaluated to true and all results are printed out.

If the following line of code:

<span ng-repeat="activities in calendar_activities track by $index" 
      ng-show="activities.fields.user == users.fields.username && 
              activities.fields.date == date | date 'yyyy-MM-dd'">`

Gets changed into:

 <span ng-repeat="activities in calendar_activities track by $index" 
       ng-show="activities.fields.user == users.fields.username">`

(NOTE: I've removed && activities.fields.date == date | date 'yyyy-MM-dd'") The first condition evaluates successfully, only the date doesn't evaluate as it should.

This is the end result. The information is correctly tied to each person on the calendar, the only problem remaining is that the information in the cells is not being compared to the date on the calendar, hence why bookings appear on every cell for that person in the column.

Hope I've provided enough information to understand the context of what I'm trying to do. Any help or suggestions is appreciated.

Why don't you just make a function that takes the dates, puts them in the same format and returns if they are equal or not? Instead of making such a mess in the html, trying to apply pipes and what not. — yBrodsky, Mar 03 '17 at 19:04

score 0 · Answer 1 · edited May 23 '17 at 10:29

You're trying to compare a string and a date object which is why the second condition is always failing. Formatting the date date | date 'yyyy-MM-dd' is not going to change the data type. That is just for display purpose. Also comparing two dates whether they are equal is always tricky as 2 date objects are completely different even if they have same date. This is one way to solve this issue.

<span ng-repeat="activities in calendar_activities track by $index" 
  ng-show="activities.fields.user == users.fields.username && 
          compareDate(activities.field.date)">

In Controller

$scope.compareDate = function(fieldDateStr){
var fieldDate= new Date(fieldDateStr);

if(fieldDate.getDate() == $scope.date.getDate() && 
fieldDate.getMonth() == $scope.date.getMonth() && 
fieldDate.getYear() == $scope.date.getYear()){
    return true;
}
else{
    return false;
}

        };

More detailed explanation of comparing 2 dates is given here.

Angularjs using ng-show condition to compare two different date formats

1 Answers1