Demystifying dates in JavaScript

JavaScript gives us a date object to work with dates and times in your projects. It's one of the important thing to learn and understand. In most of the products apps and website you will find yourself calculating time and date. But lot of the time and specially for beginners it feels tough and hard to get.

In this blog I'll try to make it more clear and build and strong understand of this concept.

JavaScript Date objects represent a single moment in time in a platform-independent format. Date objects encapsulate an integral number that represents milliseconds since the midnight at the beginning of January 1, 1970, UTC (the epoch).

- mdn docs

// This is how you create a new Date object
let newDate - new Date()

The Date object comes with all the fuctions provided by JavaScript to work with Dates and Time. When you try to print the newDate it gives you a long string like this 2024-01-27T14:34:36.795Z . Which is a little hard to understand, so lets try to format it.

When you use the .toString() method on the object it gives you the value like this Sat Jan 27 2024 19:40:13 GMT+0530 (India Standard Time), Now this string seems more meaningful. You get the day of the week, Month, day then the timestamp in 24hrs format.

Now only if you are concerned about the date you can even go with .toDateString(). This method will give you the value as Sat Jan 27 2024.

You can also try the .toLocalString() which is another option for formatting the date string and this gives a more concise string with all the all information. The output will look something like this 27/1/2024, 8:04:36 pm .

So those are the three basic ways to format the Date string, lets check them once again, one by one.

//creating a date object
let newDate = new Date()

// 2024-01-27T14:34:36.795Z
console.log(newDate)
// Sat Jan 27 2024 19:40:13 GMT+0530 (India Standard Time)
console.log(newDate.toString())
// Sat Jan 27 2024
console.log(newDate.toDateString())
// 27/1/2024, 8:04:36 pm
console.log(newDate.toLocalString())

I hope you are now a little more confident about the Date object in JavaScript right? If not no worries after this you will become absolutely confident about Dates.

Now that we know, how to format the date string and get the current date and time information, but how will you create a custom date. Yes that's also possible with the same Date object. You will have to just pass the arguments inside of the date constructor. For example if you want to create a date object for 1st January 2024 then you can do this.

let createDate = new Date(2024,0,1)
console.log(createDate.toDateString())// Mon Jan 01 2024

You can even pass time to in after those arguments, like this.

let dateTime = new Date(2024, 0, 1, 12, 00, 00)
// Mon Jan 01 2024 12:00:00 GMT+0530 (India Standard Time)
console.log(dateTime.toString())

Now if you can clearly observe you can also get the time as hours, minutes and seconds and even AM or PM in the date String. So from there I know you are smart enough that you will be able to slice out the required value for the time. But no worries JavaScript is always at your service. You even get methods for time as well.

let time = new Date()
// time in milliseconds 1706372540890
console.log(time.getTime())
// hours in 24hrs format - 21
console.log(time.getHours())
// minutes - 55
console.log(time.getMinutes())
// seconds - 18
console.log(time.getSeconds())

But for calculating time difference, or maybe you are building a quiz app and you want to check who gave the correct answer first, then you need to calculate the time precisely in milliseconds. So you can use Date.now() .

// this gives you the exact time right now in milliseconds
const rightNOw = Date.now()
console.log(rigthNow)

Ok so that's all you need to know and keep in your subconscious mind. Now I hope handling date and times in JavaScript will be a breeze for you. Thank me later or give your feedbacks on what you think about this small and quick blog on demystifying JavaScript Date Object for you. If you like coding content like this then you can follow my Youtube channel and facebook page, I upload videos on tech and coding over there. Till then have a good day and keep coding!