So you've got a requirement that calls for date arithmetic in your Angular app? Relax, it's easy.
In this guide, I'll show you how to make that happen with the Date object.
And while you're here, feel free to check out my portfolio of date-related convenience methods on GitHub.
Otherwise, just keep reading.
Date + Math = Not That Hard
It might seem as though it's more difficult to do math with Date objects than it should be. But in reality it's not hard.
In fact, you can even use a plus sign.
Let's start with a basic use case. You want to get a Date object that's 27 days in the future.
Here's how you do that:
let date: Date = new Date(); date.setDate(date.getDate() + 27); let datePipe: DatePipe = new DatePipe('en-US'); console.log(datePipe.transform(date, 'shortDate'));
Look at that. I was even nice enough to put some debug code in there.
Okay, so here's what's going on.
The first line instantiates the Date object. That will get you the current date and time.
Next, the code grabs the date property from the Date object (I know, confusing). Then it adds 27 to it and sets that new value as the date property for that Date object (I know, still confusing).
In a nutshell: it adds 27 to the value of date.
That's going to get you a date 27 days in the future.
Then the code uses DatePipe to print out a formatted version of the Date object.
Since today is February 5, 27 days in the future is March 4. Yes, Date is nice enough to increment the month if the date moves past the end of the current month.
Now this is what I see in my console after running the code above: 3/4/21.
That's what I'd expect to see because that's 27 days in the future.
Keep in mind: all you're doing with that code is incrementing days. You're not touching hours, minutes, or seconds.
So if the current time is 2:03 AM and you add 27 days to the current date, you'll end up with a Date object that's 27 days in the future at the time 2:03 AM.
That might not be what you're looking for.
If you want to take time out of the equation, consider going the midnight route. That is, set the Date object to a time of midnight.
Consider this code:
let date: Date = new Date(); date.setDate(date.getDate() + 27); date.setHours(0); date.setMinutes(0); date.setSeconds(0); date.setMilliseconds(0); let datePipe: DatePipe = new DatePipe('en-US'); console.log(datePipe.transform(date, 'short'));
All that setting stuff you see there below setDate() sets the time to midnight. I've also changed the date formatting from 'shortDate' to 'short' so you can see the time.
The output of the above code looks like this: 3/4/21, 12:00 AM.
Again, exactly what I expect.
Adding Hours, Etc.
Maybe you'd like to add something other than days to your Date object. Perhaps you'd like to add hours or minutes instead.
Or maybe you'd like to add both days and hours.
Check out this code.
let date: Date = new Date(); date.setDate(date.getDate() + 27); date.setHours(date.getHours() + 3); let datePipe: DatePipe = new DatePipe('en-US'); console.log(datePipe.transform(date, 'short'));
That will output 3/4/21, 8:28 AM based on the current time of 5:28 AM.
And, once again, we're looking good.
I think you can figure out from here how to add minutes, seconds, and milliseconds. It's the same concept you see above.
If you'd like to subtract instead of add, you can probably figure out how to do that on your own as well. Just use a minus sign instead of a plus sign in any of the code snippets above.
It will work fine.
Wrapping It Up
That's it. That's how you perform simple math with Date objects in TypeScript.
Now it's over to you. Find ways that you can use what you've learned here in your own applications.
And you can always grab the code on GitHub.