How to compare two dates in AngularJS?

Question

First of all, I just want to say that I searched Stack Overflow and couldn't quite find the answer to my particular problem, but I apologize if I missed one and this is a duplicate.

So I'm making a Task Manager using AngularJS and I have a table with a list of tasks. This is my table code:

<thead>
    <tr>
        <th><b>ID</b></th>
        <th><b>Title</b></th>
        <th><b>Start Date</b></th>
        <th><b>End Date</b></th>
        <th><b>Type</b></th>
        <th></th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="task in tasks track by $index">
        <td>{{task.id}}</td>
        <td>{{task.title}}</td>
        <td>{{task.start_date}}</td>
        <td>{{task.end_date}}</td>
        <td>{{task.type}}</td>
        <td><a ng-click="remove(task)"<i class="material-icons">clear</i></a></td>
    </tr>
</tbody>

As you can see, each task has an ID, title, start date, end date, type and then the table has a button in each row to remove the task.

Here's the code for the function remove(task):

$scope.remove = function(task)
{
    $scope.tasks.splice($scope.tasks.indexOf(task), 1);
};

Now this is important. If the current date is later than the end date, the task should be removed with no problem. But, if the current date is before and end date, the program needs to launch a pop-up with a field so the user can write a justification for canceling the task early.

So, my question is: how do I compare the end date with the current date?

Don't worry about the pop up, I just need help with the "if statement". I'll write the pop up myself.

I also have moment.js so you can use that if you like.

EDIT: Here's how my dates are formatted. I have a datepicker which gives dates in this format: YYYY-MM-DD. And then I have a timepicker which gives times in this format: hh:mm. This is how I combine the two:

$scope.tasks.push({
            'id': tasks.id,
            'title': tasks.title,
            'start_day': tasks.start_day,
            'start_time':tasks.start_time,
            'start_date':tasks.start_day + " " + tasks.start_time,
            'end_day': tasks.end_day,
            'end_time': tasks.end_time,
            'end_date':tasks.end_day + " " + tasks.end_time,
            'type': tasks.type
        });

So the datepicker date is stored in the tasks.end_day and the timepicker time is stored in the tasks.end_time and I combine them both with 'end_date':tasks.end_day + " " + tasks.end_time so the final date is in the format YYYY-MM-DD hh:mm.

that depends ENTIRELY on how your dates are currently formatted and if they're formatted in the same way. That said, regardless of format, you simply need to create two new date objects. — David L
– David L, Commented Jun 8, 2016 at 15:58
As David L says, comparing dates is simple (e.g. if (date1 <= date2)). Creating dates from strings requires parsing and you haven't shown how you're doing that. — RobG
– RobG, Commented Jun 8, 2016 at 23:54
@RobG sorry for not being too specific. Please check my edit for more details. Thank you! — Telmo F.
– Telmo F., Commented Jun 9, 2016 at 7:32

Alexander Zeitler · Accepted Answer · 2016-06-08 16:00:55Z

2

From the moment.js documentation:

var isSameOrBefore = moment().isSameOrBefore(task.end_date);
var isBefore = moment().isBefore(task.end_date);

When calling moment() without a parameter it uses the current date.

answered Jun 8, 2016 at 16:00

Alexander Zeitler

13.2k14 gold badges92 silver badges144 bronze badges

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

5 Comments

RobG Over a year ago

What is task.end_date?

Alexander Zeitler Over a year ago

@RobG task is the param of the remove function so task.end_date should be a date string

RobG Over a year ago

should be, but the OP hasn't said, or provided the format of the string. Parsing strings with the Date constructor isn't recommended.

Telmo F. Over a year ago

Okay I just tried this answer and it seems to work fine. @RobG why is this not recommended?

Alexander Zeitler Over a year ago

@T.Ferreira I guess RobG is speaking of this: github.com/moment/moment/issues/1407

Collectives™ on Stack Overflow

How to compare two dates in AngularJS?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related