JavaScript Date And Time. Here’s Everything You Need To Know

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, Date object is built-in JavaScript Object. Basically what it does, it allows you to get the user’s local time by accessing the systems clock through browser. This method also provides several methods for managing, manipulating and formatting date and time.

How To Create A Date Object In JavaScript

In order to work with date and time, you need to create the Date object first. Date don’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

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 that:

let d = new Date();

The New Date(year, month,…) Syntax

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);

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

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");

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

The New Date(milliseconds) Syntax

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);

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

How To Get Current Date And Time In JavaScript

To get the current date and time you have to create 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 is 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

When you have a date object, a number of methods are available to you to extract details from it, such as the month, date, hours or 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 month, day of 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), 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 program 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

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

Following example shows how to change the current date stored in a variable ahead of two year 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

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

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

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: