Introduction To JavaScript Date

We continue in the Speedy Chef project folder throughout this section.

Using Date

Many apps and websites require being aware of the date. We can track a users sign up date, the time between two events, and lots more. JavaScript has some built in objects to help with this.

We can call Date like this:

let date = Date();
console.log(date);

Which will log something like this:

Tue Apr 09 2024 16:27:21 GMT+0100 (British Summer Time)

This returns the current date and time as a string.

Get or set using new Date

As does the constructor function using the new keyword, just as we did with creating new Objects earlier:

let date = new Date();

When using the new constructor we can also pass in multiple values to create a different date:

// new Date(year, monthIndex, day, hours, minutes, seconds, milliseconds)
let date = new Date(2025, 6, 12);

NOTE: monthIndex begins at zero, just like arrays. January is 0, December is 11.

This constructor gives us the option to either set a date like this, or to get the current date.

Comparing dates

Working with date values like this can be difficult if we want to compare two dates. We may need to take a string, split it up, and find the numbers we need to compare which is not simple.

An alternative date format is to use a method called now:

let date = Date.now();
console.log(date);

The returned number may look strange. It is the number of milliseconds since January 1st 1970 UTC. And keep refreshing, the number goes up each time. Although it is still not ideal, it can be a simpler way of comparing dates or times.

For example, we could discover how long a user has been signed up to our website for. When a user signs up we could use Date.now() to store the current time in milliseconds.

Then on further visits we can get the current date and compare the two numbers. The difference in milliseconds would need to be converted to seconds, minutes, and days, depending on what you needed to do with the information. And we will look at this a little more soon.

Methods

Available on the Date prototype is a range of methods to get and set the date:

let date = Date.prototype;
console.log(date);

Below is a small selection of the console result:

constructor: ƒ Date()
getDate: ƒ getDate()
getDay: ƒ getDay()
getFullYear: ƒ getFullYear()
getHours: ƒ getHours()
getMilliseconds: ƒ getMilliseconds()
getMinutes: ƒ getMinutes()
getMonth: ƒ getMonth()
getSeconds: ƒ getSeconds()
getTime: ƒ getTime()
// ...

Many of these are specific to different use cases, but they work just like other methods.

To use them, since methods are on objects, we can again use the new keyword to create a date object. Then we can access these methods, one of which was getMonth:

let date = new Date();
console.log(date.getMonth());

This selects the current month, and this begins with zero, so January is zero, February is 1 and so on.

The getDay method will return the day of the week, again zero based so you will see a number from 0-6:

console.log(date.getDay());

As we discovered in the console, we also have access to some methods to set the date too. Maybe we have an event we need to re-arrange. We would need to change the month or the year, we could do it like this:

// 1. set as current date
let date = new Date();
console.log(date);

// 2. change month to December
let updatedDate = date.setMonth(11);
console.log(date);

This is a basic introduction to JavaScript Date. We will use this next inside our project to keep track of how long the pizzas have been in the oven.