Formatting & Comparing ISO String dates in Angular

Question

I am developing an advanced Angular To-Do App, which can be viewed here: https://personal-organizer.herokuapp.com/

The App is almost finished, I am just working on displaying the tasks in the "Overdue", "Due Today" and "Due Later" sections within the List state.

To achieve that, I am generating Today's date in the controller, and then I am comparing it to the Task date - placing the task in the appropriate section according to the result of the date comparison.

This is my controller, where I am creating today's date:

function ListCtrl(library) {

var vm = this; 

vm.tasks = [];    // array with all tasks

library.getTask(vm.tasks);   // filling the array with data from database
console.log(vm.tasks);

vm.today = new Date().toISOString();   // generating today's date
console.log(vm.today);

}

And this is my HTML file, where I make the date comparison to display the tasks on their appropriate sections on the page:

<div class="overdue">
     <div class="alert-danger head">OVERDUE</div>
        <br>
        <task-content ng-repeat="task in ListVM.tasks"
                   task-data="task"
                   ng-if="task.completed === false && task.date < ListVM.today"> 
        </task-content>
     </div>

    <div class="today">
     <div class="alert-warning head">DUE TODAY</div>
            <br>
        <task-content ng-repeat="task in ListVM.tasks"
                   task-data="task"
                   ng-if="task.completed === false && task.date === ListVM.today""> 
        </task-content>
     </div>

    <div class="later">
     <div class="alert-success head">DUE LATER</div>
            <br>
        <task-content ng-repeat="task in ListVM.tasks"
                   task-data="task"
                   ng-if="task.completed === false && task.date > ListVM.today"> 
        </task-content>
     </div>

By console logging today's date (vm.today), I am getting an ISO string: 2017-10-31T17:31:23.770Z

And, by console logging my task array, which is stored in a mongo database, the result object is as follows:

0:{_id: "59f42085c4efd11d743dd739", todo: "Build another App", date: "2017-10-29T04:00:00.000Z", completed: true, __v: 0, …}
1:{_id: "59efa6440667b62c30028932", todo: "Update Portfolio", date: "2017-11-04T04:00:00.000Z", completed: true, __v: 0, …}
2:{_id: "59f8077a33e2680012bdb190", todo: "Mobile Design", date: "2017-11-10T05:00:00.000Z", completed: false, __v: 0, …}
3:{_id: "59f4cbc487bfab0012cb832b", todo: "Travel to Brazil", date: "2017-11-15T05:00:00.000Z", completed: false, __v: 0, …}

Now, this were the problem is. Every time I reload the page and generate a new Today date, the "TxxxZ" part of the string is different.

That makes it impossible to find a Today date that is equal to the Task date in the database. Even though the day, month and year are the same, the "TxxxZ" part of the string will be different.

Is there any way I can format the Today date and Task date strings, cutting out the "TxxxZ" part - so only the day, month and year are compared?

Or is there another more efficient way to compare these dates and achieve the desired result?

*** This question was flagged as a duplicate, but the suggested answer for the other question, the method setHours() does not work for dates as ISO Strings - and I need to compare both dates in that format.

Is there any reason you're comparing dates as strings instead of using the Date API to do so? Or some useful tool like Moment.js? — Pointy, Oct 31 '17 at 19:24
Possible duplicate of [Comparing date part only without comparing time in JavaScript](https://stackoverflow.com/questions/2698725/comparing-date-part-only-without-comparing-time-in-javascript) — Daniel Beck, Oct 31 '17 at 19:29
@Pointy I'm pretty sure that MongoDB only saves the dates as a ISO string, and I don't know how to modify that. This is why I converted Today's date into a ISO string for comparison — Windsor Roberto Edeling, Oct 31 '17 at 19:59
If you are using *toISOString*, you're getting the UTC date, which may be different to the local date for part of the day where the local timezone offset is not +0000 (i.e. anywhere other than GMT). For those in Sydney, Australia when the local date is 1 Nov AEDT, it is still 31 Oct UTC until 11 am local time. — RobG, Oct 31 '17 at 22:31
@DanielBeck I checked the duplicate question you flagged, but the suggested answer for the other question, the method setHours() does not work for dates as ISO Strings - and I need to compare both dates in that format. — Windsor Roberto Edeling, Nov 02 '17 at 00:17
Reset the hours/mins/seconds on the Date object *before* converting to an ISO string. — Daniel Beck, Nov 02 '17 at 12:09
@DanielBeck Thanks! I tried to do the code below, it does reset the hours/mins/secs but does not convert it into an ISO String vm.today = new Date(); vm.today.setHours(0,0,0,0); vm.today.toISOString(); console.log(vm.today); — Windsor Roberto Edeling, Nov 02 '17 at 17:25
`toISOString` does not change the Date object, it returns a string representation of that date object. So just calling `vm.today.toISOString()` without capturing its return value doesn't do anything. You want `vm.today = new Date(); vm.today.setHours(0,0,0,0); console.log(vm.today.toISOString())` — Daniel Beck, Nov 02 '17 at 17:28
@DanielBeck It works for the console.log, but it still does not let me compare the dates effectively because my Task date is stored in the database as an iso string. MongoDB stores each object as {_id: "59fb5d702de0cf2e38ff96d8", todo: "Play Tennis", date: "2017-09-12T04:00:00.000Z", completed: false} — Windsor Roberto Edeling, Nov 02 '17 at 18:06
Why would that prevent you comparing the dates? Compare your (ISO format) database value to `Date().setHours(0,0,0,0).toISOString()`. — Daniel Beck, Nov 02 '17 at 18:07
Or use a regex to strip off the time from both strings instead of zeroing out the hours from the comparison value. Or use a regex to pull the specific Month / Day / Year from the mongo data and compare those to Date.getMonth, date.getDay, etc. There are probably dozens of ways to do this. — Daniel Beck, Nov 02 '17 at 18:10
@DanielBeck When I compare to my database value to "Date().setHours(0,0,0,0).toISOString()", I get the error: "(intermediate value).setHours(...).toISOString" is not a function But thanks for the pointer, I'll see what regex can do for me — Windsor Roberto Edeling, Nov 02 '17 at 18:50
Sorry, right, I forgot you can't chain Date functions like that, my mistake. You need to use an intermediate variable: `var foo = new Date(); foo.setHours(0,0,0,0); var bar = foo.toISOString();` bar now contains the ISO string representation of today's date. — Daniel Beck, Nov 02 '17 at 18:55

Formatting & Comparing ISO String dates in Angular

0 Answers0