This article originally appeared on freeCodeCamp here.
Dates are a pretty fundamental concept. We use them all the time. And computers use them all the time. But parsing dates using JavaScript can be a little...well, interesting.
In this article, we'll:
- Discuss date formatting
- Turn a wee ol' string into a proper date object using JavaScript.
- Parse a date object into a number
- Show an alternative way to use arguments instead of strings to create a date object.
Dates are tricky, but they're also incredibly helpful to use. And once you spend a little time going over the basics, your confidence will grow.
ISO 8601, of course! This is the name of the international standard for communicating date and time data. We need to be using this format when dealing with dates in JavaScript
Here's what this format looks like. You're familiar with it already – it just combines a date and time into one big piece of info that JavaScript can get cozy with.
How to Use the new Date() Constructor in JavaScript
new Date() is the constructor to create a new date in JavaScript. Shocker! 😂
shocker
If you don't pass anything into the new date constructor, it will give you a date object of whatever the current date and time is.
new Date()
A new date created without any arguments returns the current date and time.
Note that a date object can, and often should, contain a time down to the millisecond in addition to the month, day, and year.
How to Create a New Date With a String
You may pass a date string into new Date() to create a date object.
You don't have to specify a time when creating a date object.
new Date('2022-06-13') is perfectly valid. However, when you console log this new date, you'll see that a time will be automatically assigned even though we didn't declare one.
let aDate = new Date('2022-06-13')
A string date without a declared time will still be assigned one.
This can create schisms in the matrix, and it is best to include a full date. For instance, since the local system time is used to interpret the date, depending upon where in the world your computer is, you could get different results from the same non-specific date.
So, when passing a string into new Date(), use a full date with hours:minutes.milliseconds.
A capital T separates the day component from the time component as shown below:
new Date('2022-05-14T07:06:05.123')
Use the full day and time when possible
How to Create a New Date With a Number
You can also pass a number into a new Date() constructor. More on what the numbers represent below – but new Date(1656033105000), for instance, will return a legitimate date:
console.log(Date(1656033105000))
Giant numbers represent dates too
How to Create a New Date With Arguments
More on this below too...You many pass up to seven arguments into new Date() as well, creating a simpler way to represent a date and time to the Date constructor.
new Date(2022,03,14,07,33,245)
A descending list of arguments starting with the year and ending with milliseconds
What is Date.parse()?
So, an interesting thing happens if you were to use the parse method on a date object. It spits out a huge number.
Date.parse() tells us the number of milliseconds that have elapsed since January 1, 1970. This is helpful when comparing multiple dates. It's easier to compare and measure differences in dates when they are converted to numbers rather than strings.
let anotherDate = new Date(2012,07,12,12,00,234)
Date.parse(anotherDate)
Date.parse returns the number of milliseconds since January 1, 1970
Which is Better – Dates Made With Arguments or Strings?
When dating, learn to argue well for long term success. When using dates in JavaScript, use arguments over strings for long term success.
new Date(2022, 00, 12, 8, 01, 33, 456)
This can be a bit easier than creating a date using a string. The arguments are simply entered in descending order starting with the year, and ending with the milliseconds.
Only tricky part here: the month is zero indexed. So, January is 00.
new Date(2022,00,12,8,01,33,456)
Don't forget that the month is zero indexed when using arguments for date construction
How to Go Deeper With Javascript Dates
This only scratches the surface of the Date object. Check out MDN for a deep dive. As with all things, there is a treasure trove of information there.
You've got the basics now, though. Go put it into practice. You now know how to create a date object in JavaScript with new Date(). You can grab the current date and time by not passing anything into the constructor, or you can pass in a string, a number or arguments.
Thanks for Reading
Thanks for reading! I write about design and development here: https://blog.eamonncottrell.com/
And you can find me on Twitter and LinkedIn.
Have a great one!
