JavaScript Date and Time: A Guide for Beginners

There’s no escaping the clock, especially in programming. Just as we rely on clocks and watches to keep track of our days, so do programs use time-tracking tools to know what should happen and when.

Several applications need to track time. A blog application needs to remember when a post was created, whereas a calendar application displays your scheduled events.

In this guide, we discuss how to work with the date and time in JavaScript. We’ll walk you through a few examples to illustrate how to work with these tools.

What is the JavaScript Date Object?

To work with time in JavaScript, we use the Date object. This is a special object that stores the date and time. What’s more, the Date object comes with a range of methods that we can use to retrieve particular pieces of information about the date and time.

The date object looks like this:

new Date();

In this tutorial, you’ll notice that Date is capitalized. This is because Date is a built-in JavaScript object. You have to capitalize the word Date to work with the date object. 

How to Use the Date Object

Without any values, the Date object tells us the current date and time. This is calculated based on your operating system’s settings and taking your timezone into account.

We can use the Date object to retrieve the current date, like this:

var currentDate = new Date();
console.log(currentDate);

Our code returns a Date object which contains the following values:

Wed Jun 24 2020 10:49:46 GMT+0100 (British Summer Time)

As you can see, this article was written in the UK on June 24, 2020, as our timestamp shows. The beauty of the Date object is that it returns data in a human-readable date format so that it is easy for us to understand.

Retrieving a Timestamp Using Date

The above code is readable to us humans, but there’s a problem—JavaScript works differently. It interprets dates using a Unix timestamp. Unix timestamps keep count of how many seconds have passed since January 1, 1970. This is when Unix time began.

To retrieve the current time as a timestamp, you can use the getTime() method:

var currentDate = new Date();
console.log(currentDate.getTime());

Our code returns 1592992393313, a number that can be interpreted by JavaScript. 

Creating a Date Object

The default value of the Date object is the current date and time. You can change this to create a date based on a particular timestamp or date and time.

You can do this by specifying either a timestamp, a date string, or a set of numbers that correspond to the current date and time:

• new Date(timestamp)
• new Date(string)
• new Date(year, month, day, hours, minutes, seconds, number of milliseconds)

Suppose we want to create a timestamp for January 1, 2021. We could do so using this code:

var nextYear = new Date("January 1 2021 12:00");
console.log(nextYear);

Our code returns: Fri Jan 01 2021 12:00:00 GMT+0000 (Greenwich Mean Time)

We could also have created this timestamp using these lines of code:

var nextYear = new Date(1609502400000);
console.log(nextYear);
var nextYear = new Date(2021, 1, 1, 0, 0, 0, 0);
console.log(nextYear);

Our code returns: 

Fri Jan 01 2021 12:00:00 GMT+0000 (Greenwich Mean Time)
Fri Jan 01 2021 12:00:00 GMT+0000 (Greenwich Mean Time)

All of these methods create the same Date object. 

Retrieving the Date

The Date object comes with an array of built-in methods to access particular pieces of information about the date. The methods that allow you to retrieve information about the date start with get. Here’s a list for your reference:

• Year: getFullYear()
• Month: getMonth() (between 0 and 11, where 0 is January)
• Day of the Month: getDate() (between 1 and 31)
• Day of the Week: getDay() (between 0 and 6, where Sunday is 0)
• Hour: getHours() (between 0 and 23, where midnight is 0)
• Minute: getMinutes()
• Second: getSeconds()
• Millisecond: getMilliseconds()
• Timestamp: getTime()

Let’s say we want to find out what time it is right now. We could do so using this code:

const currentDate = new Date();
console.log(currentDate.getHours());

Our code returns 11. This shows us that it’s currently 11 hours into the day.

These functions are useful because they help us extract specific pieces of information about the day. We don’t need to worry about manipulating any strings; we can just use the get methods to learn more about the current time.

You can retrieve a timestamp using Universal Time Coordinated (UTC) by adding UTC between the word get and the date value. By default, the Date object will return information in a user’s local timezone. If you are working with users in multiple time zones, it’s often best to use UTC to track the time events happen easily.

Updating a Date Object

Date objects can be updated using the Date set methods. There is a set method for every get method offered by the Date object:

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

Find Your Bootcamp Match

• Year: setFullYear()
• Month: setMonth()
• Day of the Month: setDate()
• Day of the Week: setDay()
• Hour: setHours()
• Minute: setMinutes()
• Second: setSeconds()
• Millisecond: setMilliseconds()
• Timestamp: setTime()

Suppose we want to find out what day of the week it was on this date last year. We could do so by setting the year on our Date object to 2019 using setFullYear(). Then, we can use getDay() to retrieve the day of the week:

const currentDate = new Date();
currentDate.setFullYear(2019);
const daysOfTheWeek = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', Saturday', Sunday'];
const dayLastYear = currentDate.getDay();
console.log('On this day last year it was ' + daysOfTheWeek[dayLastYear]);

Our code returns: On this day last year it was Tuesday.

We first use Date() to retrieve the current date. We then use the setFullYear() method to set the year on our date object to 2019.

Next, we declare an array called daysOfTheWeek. This helps us convert the number returned by getDay() into a day of the week.

We then use the getDay() method to figure out what day of the week it was this time in 2019. Then, we print out the message On this day last year it was followed by the day of the week.

Conclusion

Using the Date object you can work with dates and times in JavaScript. The Date object comes with a range of get methods which help you learn about the current time and set methods to manipulate date and time objects. Now you’re ready to start working with the date and time in JavaScript like an expert!