So you need to determine if a given date and time is in the past? You can do that quickly in Angular with the Date object.
In this guide, I'll show you how to make it happen.
I've also got lots of date-related convenience methods on GitHub that you're welcome to steal.
Or hang around here for some explanations.
Learning From History
To determine if any given date is in the past, I think it's easiest to get the numerical date value the given date/time and then compare it to the numerical date/time value of the current moment.
If the given date/time numerical value is less than the current date/time numerical value, then the given date/time is in the past.
That's easy!
Thankfully, the Date object stores both date and time. In spite of its name.
So you have everything you need to make this work.
By the way, if you're wondering what I mean by "the numerical value" of a date, that's a really huge number representing the number of milliseconds since 1970 started. And you can easily get that number from the Date object.
With that mind, let's get busy on the comparison.
The Date/Time You're Checking
First, let's cover the date/time that you're checking to see if it's in the past (sometimes I'll call that "the given date/time").
The question starts with: how is that date stored?
Is it a string? Is it a Date object? Is it already a number?
Ultimately, it needs to be a number. And that number needs to represent the number of milliseconds since the dawn of 1970.
If it's already a Date object, just convert it to a number by invoking the getTime() method on it.
let date: Date = new Date();
let dateVal: number = date.getTime();
console.log(dateVal);That will return a number like 1612519345845.
If you've got the date as a string (like '02/05/2021'), you'll need to first convert that to a Date object and then get the numerical value from the Date object as above.
Fortunately, Date offers a constructor that's pretty intelligent. It can parse commonly used date formats. Consider this:
let date: Date = new Date('02/05/21');That will work.
If you have the date as a string, do an experiment. Try instantiating a Date object by putting that string in the constructor. Then log the result to the console to see if it matches.
Bottom line, though, you've got to get that given date into a number. Then, you're ready for the next step.
Comparing It to Now
Once you've got that other date as a numerical value, it's easy to compare it to the current point in time. Here's the method I use:
isInThePast(dateValue: number): boolean {
let inPast: boolean = false;
let today: number = Date.now();
if (dateValue < today) {
inPast = true;
}
return inPast;
}That method accepts the given date as a number.
The first line assumes that the date is not in the past. It just defaults the boolean.
The next line gets the current point in time. Even though it's called today, it also includes the current time down to the millisecond.
Now it's just a matter of making a comparison. If dateValue is less than today then yes, the given date is in the past. The code sets the boolean to true in the case.
Finally, the method returns the boolean.
And that's it. That's all you need to do to determine if a date is in the past in your Angular app.
I'd recommend you include that method in a service because you might find yourself using it over and over again.
Wrapping It Up
There you have it. Straight and to the point.
If you'd like to grab the code for this guide, feel free to do so.
And then use it as you see fit in your own Angular solutions.
Have fun!