Everything You Need To Know About JavaScript Date And Time

Posted by TotalDC

Last time we talked about JavaScript timers. And now you will learn how to work with JavaScript Date And Time.

As you may know, the Date object is a built-in JavaScript Object. What it does, is it allows you to get the user’s local time by accessing the system clock through the browser. This method also provides several methods for managing, manipulating, and formatting date and time with JavaScript.

How To Create A Date Object In JavaScript

To work with date and time, you need to create the Date object first. The date doesn’t have a corresponding literal form – all date objects need to be created using the Date constructor function which is Date(). There are four different ways to create a Date object in JavaScript.

The New Date() Syntax In JavaScript

You can declare a new Date object without initializing its value. If you do that the date and time value will be set to the current date and time on the user’s device. It looks like this:

let d = new Date();
console.log(d);

The New Date(year, month,…) Syntax In JavaScript

Or you can initialize the Date Object by passing year, month, day, hours, minutes, seconds, and milliseconds as parameters. Only year and month parameters are required, other are optional. Here’s how it looks:

let d = new Date(2022,0,31,14,35,20,50);
console.log(d);

This date represents 31 January 2022 at 14:35:20 and 50 milliseconds. As i mentioned, you can ignore the time part and specify just the date part if you wish.

The New Date(dateString) Syntax In JavaScript

JavaScript allows you to create a Date object by passing the string representing a date, or a date and time, as shown in the example:

let d = new Date("31 January 2022");
console.log(d);

This date represents 31 January 2022. You can also specify strings like Jan 31 2022, or any of several valid variations, JavaScript will automatically handle that.

The New Date(milliseconds) Syntax In JavaScript

You can define the Date object by passing the number of milliseconds since January 1, 1970 at 00:00:00 GMT. This time is known as the UNIX epoch because 1970 was the year then the UNIX operating system was introduced. Now let’s look at the example:

let d = new Date(1649158730228);
console.log(d);

Once you have created an instance of the Date object, you can use its methods to perform various tasks like – getting different components of a date, setting or modifying individual date and time values, etc.

How To Get Current Date And Time In JavaScript

To get the current date and time you have to create a new Date object without any parameters.  This will create an object with the current date and time. Here’s an example:

let now = new Date();
alert(now); // Display the current date and time

How To Create The Date And Time Strings In JavaScript

The JavaScript Date object provides several methods, such as toDateString(), toLocaleDateString(), etc. to generate date strings in different formats. Here’s an example:

let d = new Date();
console.log(d.toDateString()); // Display an abbreviated date string
console.log(d.toLocaleDateString()); // Display a localized date string
console.log(d.toISOString()); // Display the ISO standardized date string
console.log(d.toUTCString()); // Display a date string converted to UTC time
console.log(d.toString()); // Display the full date string with local time zone

Or you can use the toLocaleTimeString(), toTimeString() methods of the Date object to generate time strings. Let’s look at the example:

let d = new Date();
console.log(d.toTimeString()); // Display the time portion of the date
console.log(d.toLocaleTimeString()); // Display a localized time string

Getting Specific Date And Time Components In JavaScript

When you have a date object, several methods are available to you to extract details from it, such as the month, date, hours minutes value, etc. Let’s look at the various methods of extracting individual pieces of information from a Date object.

How To Get The Year, Month And Day In JavaScript

The Date object has several methods like getFullYear(), getMonth(), getDay() that you can use to extract the specific date components from the Date object, such as year, day of the month, day of the week, etc. Here’s an example:

let d = new Date();
// Extracting date part
console.log(d.getDate()); // Display the day of the month
console.log(d.getDay()); // Display the number of days into the week (0-6)
console.log(d.getMonth()); // Display the number of months into the year (0-11)
console.log(d.getFullYear()); // Display the full year (four digits)

The getDay() method returns a number representing the day of the week (from 0 to 6), if it is Sunday, the method returns 0 and if it is Monday, the method returns 1, etc.

Another method works very similarly – the getMonth() method returns the number of months (from 0 to 11), and 0 represents the first month of the year. If it is January the method returns 0 not 1; and if it is August, the method returns 7, etc.

How To Get Hours, Minutes, Seconds, And Milliseconds In JavaScript

The Date object has methods like getHours(), getMinutes(), getSeconds(), getTimezoneOffset() to extract the time components from the Date object. Here’s how they look:

let d = new Date();
// Extracting time part 
console.log(d.getHours()); // Display the number of hours into the day (0-23)
console.log(d.getMinutes()); // Display the number of minutes into the hour (0-59)
console.log(d.getSeconds()); // Display the seconds into the minute (0-59)
console.log(d.getMilliseconds()); // Display the number of milliseconds into second (0-999)
console.log(d.getTime()); // Display the number of milliseconds since 1/1/1970
console.log(d.getTimezoneOffset()); // Display the time-zone offset (from Greenwich Mean Time) in minutes

Setting The Date And Time Values In JavaScript

Now that you know how to retrieve date and time values, let’s look at how you can set or modify these values using JavaScript. This is most often used in programs where you have to change the value of the Date object from one particular date or time to another.

How To Set The Year, Month, And Day In JavaScript

The Date object has methods such as setFullYear(), setMonth(), and setDate() methods to set the year, month, and date components of the Date object.

The following example shows how to change the current date stored in a variable ahead of two years in the future.

let d = new Date();
d.setFullYear(d.getFullYear() + 2);
console.log(d); // Display future date

Or you can use the setMonth() method to set or modify the month part of a Date object.

let d = new Date(); // Current date and time
d.setMonth(0); // Sets month to 0, January
console.log(d);

Same with setDate() method – you can modify the day part of the Date object. Here’s how:

let d = new Date(2022, 5, 24); // June 24, 2022
d.setDate(15); // Sets date to 15, new date will be June 15, 2022
console.log(d);

How To Set Hours, Minutes And Seconds In JavaScript

The setHours(), setMinutes(), setSeconds(), setMilliseconds() can be used to set the hour, minutes, seconds, and milliseconds part of the Date object.

Each method takes integer values as parameters. Hours range from 0 to 23. Minutes and seconds range from 0 to 59. And milliseconds range from 0 to 999. Here’s an example:

let d = new Date(2022, 5, 24); // June 24, 2022 00:00:00
d.setHours(8);
d.setMinutes(30);
d.setSeconds(45);
d.setMilliseconds(600);
console.log(d);